首页 > 代码库 > 迷你MVVM框架 avalonjs 学习教程21、双向绑定链
迷你MVVM框架 avalonjs 学习教程21、双向绑定链
avalon的双向绑定机制，是通过一条依赖链实现。此依赖链最底层是监控属性、监控数组，中层是计算属性、监控函数，再上点是求值函数，最上层是视图刷新函数。
所谓计算属性，监控属性，监控函数属性，我们改变它们的值，它们会引发视图变化；而监控数组，是我们调用它的一些方法，也会引发视图变化。
var vm = avalon.define({ a: "这是监控属性", $b: "这是非监控属性", $skipArray: ["c", "d"], c: "位于$skipArray里，因此也是非监控属性", d: "位于$skipArray里，因此也是非监控属性", obj: {//这个obj是一个子VM xx: "xxx" }, fn: function() { alert(1)//这里面没有vm的监控属性（仅指其第一层属性），因此是一个普通函数 }, fn2: function() { return vm.a //这里面有vm的监控属性（仅指其第一层属性），因此是一个监控函数 }, fn3: function() { return vm.fn2()//fn2是方法而不是监控属性，因此也是一个普通函数 }, array: [1, 2, 3], //这是一个监控数组 computed: {//这是一个计算属性，因此它有一个get方法，this指向vm get: function() { return this.a + this.$b } }, computed2: {//这是一个计算属性，因此它有get，set方法 get: function() { return this.a + "!!!" }, set: function(v) { this.a = v } }, ccc: {//这一个普通的对象，构成一个子VM，因为计算属性只允许最多有两个方法，不能出现第三个属性 get: function() { return this.a + "!!!" }, set: function(v) { this.a = v }, host: {} } })为了性能起见，我们需要将一些属性变成不可监控。这有两个途径，在属性名或方法名前加一个$，或者把属性名放到$skipArray数组里。
监控属性，计算属性，监控属性什么都是位于VM中；而最上面两层是位于视图，通过分解绑定属性，推断出来。比如说ms-text=”aaa”，我们从属性名得到其视图刷新函数（所有视图刷新函数都定义在 avalon.bindingExecutors对象上），求值函数是通过内部的parseExpr方法编译出来。
<!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://www.mamicode.com/avalon.js" type="text/javascript"></script> <script> vmodel = avalon.define({ $id: "test", a: 1, b: 2, fn: function() { return (parseFloat(vmodel.a) || 0) + (parseFloat(vmodel.b) || 0) } }) </script> </head> <body ms-controller="test"> <div><input ms-duplex="a"/>{{a}}</div> <div><input ms-duplex="b"/>{{b}}</div> <div>{{fn()}}</div> </body></html>
<!DOCTYPE html><html> <head> <title>ms-class</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.mamicode.com/avalon.js"></script> <style> .green{ background: green; } </style> <script type="text/javascript"> var model = avalon.define({ $id: "test", array: [], add: function(){ model.array.push(1) }, remove: function(){ model.array.pop() } }) </script> </head> <body ms-controller="test" > <div ms-class="green: array.length" style="width:400px;height:200px"> <button ms-click="add" type="button">add</button><button ms-click="remove" type="button">remove</button> </div> </body></html>
一般情况下，都是上层依赖下层，下层发生改变，就会自动向上冒泡，到视图刷新函数这一层，实现视图的改变，只有一个例外，就是ms-duplex。它会偷偷 在视图上绑定一些事件，通过监听表单元素的值，将它直接同步到下方的监控属性与计算属性。
迷你MVVM框架 avalonjs 学习教程21、双向绑定链
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。