AvalonJS

[TOC]

AvalonJS

学习地址

迷你MVVM框架，解决双向绑定，减少DOM操作（各种选择器），降低开发代码量。以ms-进行属性标记，事件绑定，是avalon绑定系统的一部分。隐形JQuery，有了绑定，我们可以更专注于业务逻辑本身，而不是技术。

工作原理：

框架在DOMReady时扫描DOM树，将视图中的绑定属性与{{}}插值表达式抽取出来，转换为求值函数与视图刷新函数。

方式：

通过avalon.define定义ViewModel，必须指定$id,不想监听的属性通过$skipArray:["name"]进行过滤。

注意：

avalon不允许在VM定义之后，再追加新属性与方法

不允许在define里面直接调用方法或ajax

视图模型
更新vm中的属性，普通属性直接赋值，数组中类型必须一致，对象用model中用set方法赋值（它有两个参数，第一个是index，第2个是新值）

<script>
var model : avalon.define({
$id:  "update",
aaa : "str",
bbb : false,
ccc : 1223,
time : new Date,
simpleArray : [1, 2, 3, 4],
objectArray : [{name: "a"}, {name: "b"}, {name: "c"}, {name: "d"}],
object : {
o1: "k1",
o2: "k2",
o3: "k3"
},
simpleArray : [1, 2, 3, 4],
objectArray : [{name: "a", value: "aa"}, {name: "b", value: "bb"}, {name: "c", value: "cc"}, {name: "d", value: "dd"}],
object : {
o1: "k1",
o2: "k2",
o3: "k3"
}
})
setTimeout(function() {
//如果是更新简单数据类型（string, boolean, number）或Date类型
model.aaa = "这是字符串"
model.bbb = true
model.ccc = 999999999999
var date = new Date
model.time = new Date(date.setFullYear(2005))
}, 2000)

setTimeout(function() {
//如果是数组，注意保证它们的元素的类型是一致的
//只能全是字符串，或是全是布尔，不能有一些是这种类型，另一些是其他类型
//这时我们可以使用set方法来更新（它有两个参数，第一个是index，第2个是新值）
model.simpleArray.set(0, 1000)
model.simpleArray.set(2, 3000)
model.objectArray.set(0, {name: "xxxxxxxxxxxxxxxx", value: "xxx"})
}, 2500)
setTimeout(function() {
model.objectArray[1].name = "5555"
}, 3000)
setTimeout(function() {
//如果要更新对象，直接赋给它一个对象，注意不能将一个VM赋给它，可以到VM的$model赋给它（要不会在IE6-8中报错）
model.object = {
aaaa: "aaaa",
bbbb: "bbbb",
cccc: "cccc",
dddd: "dddd"
}
}, 3000)
</script>

绑定

{{}}插值表达式，{{}}里面可以添加各种过滤器（以|进行标识）。插值表达式{{}}在绑定属性的使用，只限那些能返回字符串的绑定属性，如ms-attr、ms-css、ms-include、ms-class、 ms-href、 ms-title、ms-src等。一旦出现插值表达式，说明这个整个东西分成可变的部分与不可变的部分，{{}}内为可变的，反之亦然。 如果没有{{}}说明整个东西都要求值，又如ms-include="'id'"，要用两种引号强制让它的内部不是一个变量。

作用域绑定，就近原则。在选择是继承还是组合的问题上，avalon倾向组合。组合的使用范例就是CSS，因此也有了ms-important的诞生。而ms-important就相当于CSS的important语句，强制这个区域使用此ViewModel，不再往上查找同名属性或方法！

<div ms-controller="AAA">
<div>{{name}} :  {{color}}</div>
<div ms-controller="BBB">
<div>{{name}} :  {{color}}</div>
<div ms-controller="CCC">
<div>{{name}} :  {{color}}</div>
</div>
<div ms-important="DDD">
<div>{{name}} :  {{color}}</div>
</div>
</div>
</div>

忽略扫描绑定(ms-skip)

4。模板绑定(ms-include)

数据填充(ms-text, ms-html)、

事件绑定(ms-on)

ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
ms-keypress
ms-keyup
ms-keydown
ms-focus
ms-blur
ms-change
ms-scroll
ms-animation
ms-on-*

avalon扫描顺序

ms-skip --> ms-important --> ms-controller --> ms-if --> ms-repeat --> ms-if-loop --> ...-->ms-each --> ms-with --> ms-duplex

ms-skip 直接跳过，不会扫描其他属性和子孙节点

ms-important， ms-controller这两个用于圈定VM的作用域的绑定属性

ms-if="bool",同样隐藏，但它是将元素移出DOM。这个功能直接影响到CSS :empty伪类的渲染结果，因此比较有用。

ms-duplex除了负责将VM中对应的值放到表单元素的value中，还对元素偷偷绑定一些事件，用于监听用户的输入从而自动刷新VM。

样式绑定(ms-css)
用法为ms-css-name="value"

数据绑定(ms-data)
用法为ms-data-name="value", 用于为元素节点绑定HTML5 data-*属性。