大家可以在仓库中看到，多出了一个叫avalon.observe的东西，它是基于Object.observe，dataset, Promise等新API实现。其中，它也使用全新的静态收集依赖的机制，这个机制也完成得差不多，因此avalon与avalon.mobile下一版将会应用这最新成果，进行大改。
- fix IE6-8下直接修改表单元素值不触发data-duplex-changed回调的BUG, 详见这里
- chrome浏览器对文本域进行Ctrl+V操作，会触发DOMNodeRemoved事件,这会引发widget组件的VM自动调用$remove方法 详见这里
- fix ms-include 从textarea元素取得模板出错的BUG
- 对SVG元素取className出错的BUG, 现在addClass, removeClass, hasClass都是通过classList处理，如果浏览器支持classList，框架会通过ClassList内部方法为它进行兼容。
- 重构avalon.slice, avalon.isPlainObject, Object.keys，让它们在IE6-8下与其他浏览器表现得更加一致
- 重构avalon.parseExprProxy
- ms-disabled, ms-enabled, ms-checked, ms-selected, ms-readonly这些绑定现在的实现都改为走ms-attr的通道。
- 修复IE下的cloneNode BUG，让其完美支持VML元素的复制。其一, 其二
- 修复getVariables BUG，让其能从缓存直接取已经计算好的数据。
- 升级avalon.define, 让其支持新的传参方式
着重说一下最后一个新特性。原来定义一个VM大概如下：
var model = avalon.define("test", 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;
}
}
vm.click = function() {
alert(vm.firstName)
}
vm.$watch("firstName", function() {
alert(vm.firstName)
})
vm.arr = ["aaa", 'bbb', "ccc", "ddd"]
vm.selected = ["bbb", "ccc"]
vm.checkAllbool = vm.arr.length === vm.selected.length
vm.checkAll = function() {
if (this.checked) {
vm.selected = vm.arr
} else {
vm.selected.clear()
}
}
})
model.selected.$watch("length", function(n) {
model.checkAllbool = n === model.arr.size()
})
现在还可以这样定义：
var model = avalon.define({
$id: "test",
firstName: "司徒",
lastName: "正美",
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;
},
},
click: function() {
alert(model.firstName)
},
arr: ["aaa", 'bbb', "ccc", "ddd"],
selected: ["bbb", "ccc"],
checkAllbool: true,
checkAll: function() {
if (this.checked) {
model.selected = model.arr
} else {
model.selected.clear()
}
}
})
model.checkAllbool = model.arr.length === model.selected.length
model.$watch("firstName", function() {
alert(model.firstName)
})
model.selected.$watch("length", function(n) {
model.checkAllbool = n === model.arr.size()
})
迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon
官网地址http://rubylouvre.github.io/mvvm/
avalon的新UI库地址OniUI， 多达34个UI，强大的换肤功能
朋友们用avalon做的东西