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