MVVM js 库JsRender/JsViews和knockoutjs介绍

MVVM概念

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

实例说话

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就是这种急人所急的产品，为吸引关注度，特提供首页快照：