上一篇《Avalon2简介》中介绍了Avalon的基本信息,今天我们紧跟着上一篇文章来详细看一下VM的内容。
按照Avalon官方文档的说法,VM属于比较重型的对象。
- 超轻量 Object.create(null)
- 轻量 一般的对象 {}
- 重量 带有访问器属性的对象, avalon VM对象
- 超重量 各种节点或window对象
内部属性
VM中以$
开头的属性都是框架保留使用的特殊属性,为数据起名字时要小心避开。以$开头的属性,目前除了$id
, $events
, $watch
, $fire
, $model
比较稳定外, 其他系统属性在不同版本存在增删的情况。在使用的时候,我们需要注意版本间的区别。
- $id,vm的名字
- $watch,用于添加监听函数
- $fire,用于触发监听函数
- $events,用于储存监听函数
- $model,返回一个纯净的JS对象
- $element,2.0新增,当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上
- $computed,2.2.1新增,用来集中定义计算属性
注:avalon在VBScript或Object.defineProperty模式下不支持追加新属性与方法。VM中的数据更新,只能通过
=
赋值方式实现。但要注意在IE6-8,由于VM是一个VBScript对象,为VM添加新属性会抛错, 因此我们想批量更新属性要时格外小心了,需要用hasOwnProperty进行过滤。
如果我们需要向VM中添加新属性,我们可能会这样写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vm1</title>
<script type="text/javascript" src="js/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test"
})
setTimeout(function() {
vm.name = "jianggujin";
}, 2000);
</script>
</head>
<body ms-controller="test">
<div>Welcom, {{name}}</div>
</body>
</html>
为了模拟添加数据,我们在延迟2秒后,增加了一个name属性,运行后我们会发现这样通常不会按照我们期望的那样显示,想要实现期望的效果,我们需要稍微修改下上面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vm1</title>
<script type="text/javascript" src="js/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
data: {}
})
setTimeout(function() {
vm.data = {
name: "jianggujin"
};
}, 2000);
</script>
</head>
<body ms-controller="test">
<div>Welcom, {{data.name}}</div>
</body>
</html>
这里面的data只是用来方便vm监控属性的,我们也可以起一个其他的名字,使用这种方式,当我们需要添加新属性的时候,需要使用=
进行赋值,如果仅需要更改属性的值,则可以直接修改,比如:vm.data.name="jiang";
监控属性
在VM中,改变它们会引起视图改变的属性。如果一个属性是$
开头, 或在定义时放在$skipArray
数组中,或是函数或节点元素, 它们都不会转换成监控属性.
此外, 改变监控属性的值还会触发对应的$watch监听回调。
计算属性
计算属性是监控属性的强化版,它必须依赖于1个或多个监控属性。通过普通的监控属性实现对视图的监听,它自身的变化也由监控属性进行驱动。
计算属性集中定义在$computed
对象中。有多种形式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vm1</title>
<script type="text/javascript" src="js/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
welcom: 'Welcom',
name: 'jianggujin',
$computed: {
fullName: function() {
return this.welcom + ' ' + this.name
}
}
})
</script>
</head>
<body ms-controller="test">
<div>{{fullName}}</div>
</body>
</html>
非监控属性
这包括框架添加的$id, $events
, $model
属性, $fire
, $watch
, $render
方法, 及用户自己设置的以$
开头的属性,放在$skipArray
数组中的属性,值为函数、各种DOM节点的属性, 总之,改变它们的值不会产生同步视图的效果。