迷你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="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="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、双向绑定链的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
随机推荐
- logging 的配置和使用
logging 的配置和使用 reference : logging cookbook logging HOWTO 测试源码,example import logging nt = 'xwei' # ...
- Angular 4 路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...
- 打开Visual Studio 2012的解决方案 连接 Dynamics CRM 2011 的Connect to Dynamics CRM Server 在其工具下没有显示
一.使用TFS 代码管理,发现Visual Studio 2012 菜单栏 工具下的Connect to Dynamics CRM Server 没有显示. 平常打开VS下的工具都会出现Connect ...
- ML(4): 决策树分类
决策树(Decision Tree)是用于分类和预测的主要技术,它着眼于从一组无规则的事例推理出决策树表示形式的分类规则,采用自顶向下的递归方式,在决策树的内部节点进行属性值的比较,并根据不同属性判断 ...
- HttpClient连接池
HttpClient连接池,发现对于高并发的请求,效率提升很大.虽然知道是因为建立了长连接,导致请求效率提升,但是对于内部的原理还是不太清楚.后来在网上看到了HTTP协议的发展史,里面提到了一个属性C ...
- 十二、jdk工具之jcmd介绍（堆转储、堆分析、获取系统信息、查看堆外内存）
目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...
- 夜神模拟器+seleinm抓取手机app（参考资料集合）
目前准备开始实现这个技术,将看起来还算可靠的参考链接粘贴如下: http://www.cnblogs.com/puresoul/p/4597211.html https://www.cnblogs.c ...
- Xss漏洞原理分析及简单的讲解
感觉百度百科 针对XSS的讲解,挺不错的,转载一下~ XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XS ...
- python logging模块使用教程
简单使用 #!/usr/local/bin/python # -*- coding:utf-8 -*- import logging logging.debug('debug message') lo ...
- python之socket编写
Socket 类型 套接字格式: socket(family,type[,protocal]) 使用给定的地址族.套接字类型.协议编号(默认为0)来创建套接字. socket类型 描述 socket. ...