首页 > 代码库 > 迷你MVVM框架 avalonjs 1.3.3发布
迷你MVVM框架 avalonjs 1.3.3发布
这应该是1.3X系列最后一个版本了,大家可以在仓库中看到,多出了一个叫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做的东西
- 移动应用:读酷
- chrome插件:饭否客户端
- 为知笔记
- 金山WPS office 会员中心
- 桑夏资产官网
- 企业级应用:超博CRM客户关系管理系统(帐号:crm_ceo 密码:nncb_ceo)
- uliweb Python框架与avalon的组合示例
- avalon+jQuery实现域名注册查询
- 路由器示例
- 边锋活动页
- 记者考试题
- 基于avalonJS实现的2048游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。