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代码

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


Comments

169 responses to “JsViews-JavaScript实现的Web前端MVVM框架”

Leave a Reply