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后，估计这两个库不定日后也可以用来恰当好处的解决其他的问题。
使用代码注入绑定数据和command，同时要支持模板，在这两项上已经覆盖了JsRender/JsViews的功能。如它首页上宣传的：
- 通俗易懂的语法绑定数据模型和Dom
- 数据模型更改后，界面UI自动更新
- 数据模型间可以建立关系链，轻松实现多个数据模型间的重组构造出新的数据
- 快速构建基于数据模型的复杂可嵌套UI组件。
官方网站有详细的各种demo，api文档等，其他实际应用也有放出来。推荐看英文版的帮助文档，原滋原味不枯燥，中文翻译过来后，始终会丢失掉一些东西。
扩展
对于不管平台的纯web前端来说，以上基本够用，但是对于身兼服务端和前端的苦逼还是希望更多一点的包装，Knockoutjs要是在vs里面像各种view engine一样使用就更好了，没有intelligence的日子太痛苦了。knockoutmvc就是这种急人所急的产品，为吸引关注度，特提供首页快照：
