JsViews-JavaScript实现的Web前端MVVM框架

最近被北京的Larry童鞋拉进海关的一个项目里，需要对Katal（现在改名叫Windows Azure Pack）做二次开发，就开始研究了一下Katal的Web前端框架。这里做一些总结。

Katal和Azure的管理门户用的是同一套框架和控件，所以你会发现Katal和Azure管理门户的布局，导航，向导，表格，任务栏，曲线图等等都是一个模子的，都是类jQuery UI的widget控件。在UI和业务层之间的数据绑定这块，Katal使用了JsViews 来构建了类似WPF里的MVVM框架。这个框架包含了下面三个部分

• JsRender (jsrender.js)
• JsViews (jquery.views.js)
• JsObservable (jquery.observable.js)

JsRender主要的作用就是把对象数据填充成为模版里的字符串里去，JsViews主要是把JsRender处理过的模版变成前端DOM，并且能在DOM和原始数据之间做双向的同步。换句话说，如果后台数据变了，前端DOM会自动更新，如果用户做了UI操作改变了DOM，后台数据也会自动更新。用过MVVM开发WPF的童鞋应该很快就明白。JsObservable主要是实现在数据源变化，触发事件，类似DotNet里的ObservableCollection。

关于JsRender和JsViews的在线学习不多，不过它们全部在GitHub上开源，所以可以直接查看源代码来学习。另外，http://www.jsviews.com/#samples有很多在线例，如果要深入研究JsViews和JsRender的语法，最好的方法就是阅读下面的demo代码

• JsViews https://github.com/BorisMoore/jsviews/tree/master/demos
• JsRender https://github.com/BorisMoore/jsrender/tree/master/demos

另外这里的几篇博客也是不错的阅读材料

• New Course on JsRender Templating Fundamentals with JavaScript.
• Client Insight – Using JsRender with JavaScript and HTML
• Client Insight – Advanced JsRender Templating Features