迷你简单易用的MVVM框架
- avalon.js 兼容IE6,及标准浏览器
- avalon.mobile.js 则只支持IE10及其以上版本,及标准浏览器
- 使用简单,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!
- 兼容到IE6(其他mvvm框架, knockoutjs IE6, angularjs IE8, emberjs IE8, winJS IE9 )
- 没有任何依赖,不到3000行,压缩后不到30KB
- 支持管道符风格的过滤函数,方便格式化输出
- 局部刷新的颗粒度已细化到一个文本节点,特性节点
- 要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
- 让DOM操作的代码近乎绝迹
- 使用类似CSS的重叠覆盖机制,让各个ViewModel分区交替地渲染页面
- 节点移除时,智能卸载对应的视图刷新函数,节约内存
- 操作数据即操作DOM,对ViewModel的操作都会同步到View与Model去。
- 自带AMD模块加载器,省得与其他加载器进行整合。
<fieldset ms-controller="simple"> <legend>例子</legend> <p>First name: <input ms-duplex="firstName" /></p> <p>Last name: <input ms-duplex="lastName" /></p> <p>Hello, <input ms-duplex="fullName"></p> <div>{{firstName +" | "+ lastName }}</div> </fieldset>
avalon.ready(function() { avalon.define("simple", function(vm) { vm.firstName = "司徒" vm.lastName = "正美" vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor, set: function(val) {//里面必须用this指向scope,不能使用scope var array = (val || "").split(" "); this.firstName = array[0] || ""; this.lastName = array[1] || ""; }, get: function() { return this.firstName + " " + this.lastName; } } }); avalon.scan() })