MVVM js 库JsRender/JsViews和knockoutjs介绍

MVVM概念

MVVM的解释有很多,抛开抽象的描叙我想最实用的一点是把UI和数据绑定,事件做成了一种静态契约,也就是模版,同时UI和数据可以独立动态变化。WPF,SL相对Winfrom和asp.net webform实际上的实现方式是把以前在后台的绑定和声明移到了UI页面。Js 来实现MVVM更有优势,因为js是动态语言,html也可以动态解析,真正和平台无关。目前mvvm js库比较热门的有JsRender/JsViewsknockoutjs。下面具体了解下这两个库。

实例说话

JsRenderSample

引入js:

<script src="/script/jquery-1.7.js" type="text/javascript"></script>

    <script src="/script/jsrender.js" type="text/javascript"></script>

Html:

<div id="movieList">

    </div>

模板:

<script id="movieTemplate" type="text/x-jsrender">

    <div>

       {{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}})

    </div>

</script>

Js:

<script type="text/javascript">

        var movies = [

                   { name: "The Red Violin", releaseYear: "1998" },

                   { name: "Eyes Wide Shut", releaseYear: "1999" },

                   { name: "The Inheritance", releaseYear: "1976" }

              ];

        // Render the template with the movies data and insert

        // the rendered HTML under the "movieList" element

        $("#movieList").html($("#movieTemplate").render(movies));

    </script>

从最后一行js代码就可以了解jsrender是怎么用的了:容器+模版+数据。

Knockout example:

引入js:

<script src="/script/knockout-2.2.1.js" type="text/javascript"></script>

Html:

<div>

        <p>

            First name: <strong data-bind="text:firstName">todo</strong></p>

        <p>

            Last name: <strong data-bind="text:lastName">todo</strong></p>

    </div>

Js:

<script type="text/javascript">

        // 数据

        function AppViewModel() {

            this.firstName = "Bert";

            this.lastName = "Bertington";

        }

        //注册

        ko.applyBindings(new AppViewModel());

    </script>

Knockout实际上也支持模板,如果是模版,用法和jsrender很像。可以看到knockout可以更好的在UE和coder间转换。

总结

JsRender/JsViews:

 jsRender使用模板填充数据最终得到一串html,而不管后面数据的变化。解决了binding,没有解决command。随后,jsviews出来了,加上jquery.observable.js,jquery.observable.js可以监听数据的更改。解决了command的问题。JsRender/JsViews没有使用注入绑定,保持了html代码的干净,但是感觉要写更多代码,另外必须得把js跑起来才能看到效果,对不会js的UI 设计者带来难度。所以学习起来,JsRender/JsViews的广度和难度更高,并且到目前为此,学习资源基本上只有github上的源码和demo。以及个别大牛的介绍http://msdn.microsoft.com/zh-cn/magazine/hh882454.aspx.不过,对于爱学习有钻劲的人来说,看了jsRender和jquery.observable.js后,估计这两个库不定日后也可以用来恰当好处的解决其他的问题。

knockoutjs:

使用代码注入绑定数据和command,同时要支持模板,在这两项上已经覆盖了JsRender/JsViews的功能。如它首页上宣传的:

  1. 通俗易懂的语法绑定数据模型和Dom
  2. 数据模型更改后,界面UI自动更新
  3. 数据模型间可以建立关系链,轻松实现多个数据模型间的重组构造出新的数据
  4. 快速构建基于数据模型的复杂可嵌套UI组件。

官方网站有详细的各种demo,api文档等,其他实际应用也有放出来。推荐看英文版的帮助文档,原滋原味不枯燥,中文翻译过来后,始终会丢失掉一些东西。

扩展

对于不管平台的纯web前端来说,以上基本够用,但是对于身兼服务端和前端的苦逼还是希望更多一点的包装,Knockoutjs要是在vs里面像各种view engine一样使用就更好了,没有intelligence的日子太痛苦了。knockoutmvc就是这种急人所急的产品,为吸引关注度,特提供首页快照:

 MVVM js 库JsRender/JsViews和knockoutjs介绍

 

 

你可能感兴趣的:(jsrender)