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就是這種急人所急的產品，為吸引關注度，特提供首頁快照：
