请不要无视这里，这里都是链接，可以点的
- 关于AvalonJs
- 开始的例子
- 扫描
- 视图模型
- 数据模型
- 绑定
- 作用域绑定(ms-controller, ms-important)
- 忽略扫描绑定(ms-skip)
- 模板绑定(ms-include)
- 数据填充(ms-text, ms-html)
- 类名切换(ms-class, ms-hover, ms-active)
- 事件绑定(ms-on，……)
- 显示绑定(ms-visible)
- 插入绑定(ms-if)
- 双工绑定(ms-duplex)
- 样式绑定(ms-css)
- 数据绑定(ms-data)
- 属性绑定(ms-attr)
- 循环绑定(ms-repeat)
- 数组循环绑定(ms-each废弃)
- 对象循环绑定(ms-with废弃)
- UI绑定(ms-widget)
- 模块间通信及属性监控 $watch，$fire, $unwatch
- 过滤器
- AMD加载器
- 路由系统
- AJAX
- 功能扩展
- 在IE6下调试avalon
- 权限控制
关于AvalonJS
avalon是一个简单易用迷你的MVVM框架，它最早发布于2012.09.15，为解决同一业务逻辑存在各种视图呈现而开发出来的。 事实上，这问题其实也可以简单地利用一般的前端模板加jQuery 事件委托 搞定，但随着业务的膨胀， 代码就充满了各种选择器与事件回调，难以维护。因此彻底的将业务与逻辑分离，就只能求助于架构。 最初想到的是MVC，尝试过backbone，但代码不降反升，很偶尔的机会，碰上微软的WPF， 优雅的MVVM架构立即吸引住我，我觉得这就是我一直追求的解决之道。
MVVM将所有前端代码彻底分成两部分，视图的处理通过绑定实现（angular有个更炫酷的名词叫指令）， 业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。 显然所有神秘都有其内幕，C#是通过一种叫访问器属性的语句实现，那么JS也有没有对应的东西。 感谢上帝，IE8最早引入这东西（Object.defineProperty），可惜有BUG，但带动了其他浏览器实现它，IE9+便能安全使用它。 对于老式IE，我找了好久，实在没有办法，使用VBScript实现了。
Object.defineProperty或VBS的作用是将对象的某一个属性，转换一个setter与getter， 我们只要劫持这两个方法，通过Pub/Sub模式就能偷偷操作视图。为了纪念WPF的指引，我将此项目以WPF最初的开发代号avalon来命名。 它真的能让前端人员脱离DOM的苦海，来到数据的乐园中！
优势绝对的优势就是降低了耦合， 让开发者从复杂的各种事件中挣脱出来。 举一个简单地例子， 同一个状态可能跟若干个事件的发生顺序与发生时的附加参数都有关系， 不用 MVC (包括 MVVM) 的情况下, 逻辑可能非常复杂而且脆弱。 并且通常需要在不同的地方维护相关度非常高的一些逻辑， 稍有疏忽就会酿成 bug 不能自拔。使用这类框架能从根本上降低应用开发的逻辑难度， 并且让应用更稳健。
除此之外， 也免去了一些重复的体力劳动， 一个 {value} 就代替了一行 $(selector).text(value)。 一些个常用的 directive 也能快速实现一些原本可能需要较多代码才能实现的功能
- 使用简单,作者是吃透了knockout, angular,rivets API设计出来，没有太多复杂的概念， 指令数量控制得当，基本能覆盖所有jQuery操作， 确保中小型公司的菜鸟前端与刚转行过来的后端也能迅速上手。
- 兼容性非常好， 支持IE6+，firefox3.5+, opera11+, safari5+, chrome4， 最近也将国产的山寨浏览器（360， QQ， 搜狗，猎豹， 邀游等）加入兼容列队 （相比其他MVVM框架，KnockoutJS(IE6), AngularJS1.3(IE9), EmberJS(IE8), WinJS(IE9)）
- 向前兼容非常好，不会出现angular那种跳崖式升级
- 注重性能，由于avalon一直在那些上千的大表格里打滚，经历长期的优化， 它能支撑14000以上绑定（相对而言，angular一个页面只能放2000个绑定）。另，在IE10等能良好支持HTML5的浏览器， 还提供了avalon.modern.js这个高性能的版本。
- 没有任何依赖，不到5000行，压缩后不到50KB
- 完善的单元测试，由于测试代码非常庞大，放在独立的仓库中—— avalon.test
- 拥有一个包含2个Grid，1个树，1 个验证插件等总数近50个UI组件库 OniUI， 由去哪儿网前端架构组在全力开发与维护
- 存在一个活跃的小社区，由于国内已有不少公司在用，我们都集中一个QQ群里互相交流帮助 QQ:79641290、228372837(注明来学avalon)
- 支持管道符风格的过滤函数，方便格式化输出
- 让DOM操作的代码近乎绝迹，因此实现一个功能，大致把比jQuery所写的还要少50%
- 使用类似CSS的重叠覆盖机制，让各个ViewModel分区交替地渲染页面
- 节点移除时，智能卸载对应的视图刷新函数，节约内存
- 操作数据即操作DOM，对ViewModel的操作都会同步到View与Model去
- 自带AMD模块加载器，省得与其他加载器进行整合
avalon现在有三个分支:avalon.js 兼容IE6，标准浏览器, 及主流山寨浏览器(QQ, 猎豹, 搜狗, 360, 傲游); avalon.modern.js 则只支持IE10等支持HTML5现代浏览器 ; avalon.mobile.js，添加了触屏事件与fastclick支持，用于移动端
开始的例子
我们从一个完整的例子开始认识 avalon ：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://t.zoukankan.com/avalon.js"></script>
</head>
<body>
<div ms-controller="box">
<div ms-css- ms-css- ms-click="click"></div>
<p>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p>
<p>H: <input type="text" ms-duplex="h" /></p>
</div>
<script>
var vm = avalon.define({
$id: "box",
w: 100,
h: 100,
click: function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
</script>
</body>
</html>
上面的代码中，我们可以看到在JS中，没有任何一行操作DOM的代码，也没有选择器，非常干净。在HTML中， 我们发现就是多了一些以ms-开始的属性与{{}}标记，有的是用于渲染样式， 有的是用于绑定事件。这些属性或标记，实质就是avalon的绑定系统的一部分。绑定（有的框架也将之称为指令）， 负责帮我们完成视图的各种操作，相当于一个隐形的jQuery。正因为有了绑定，我们就可以在JS代码专注业务逻辑本身， 写得更易维护的代码！
扫描
不过上面的代码并不完整，它能工作，是因为框架默认会在DOMReady时扫描DOM树，将视图中的绑定属性与{{}}插值表达式抽取出来，转换为求值函数与视图刷新函数。
上面的JS代码相当于：
avalon.ready(function() {
var vm = avalon.define({
$id: "box",
w: 100,
h: 100,
click: function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
avalon.scan()
})
avalon.scan是一个非常重要的方法，它有两个可选参数，第一个是扫描的起点元素，默认是HTML标签，第2个是VM对象。
//源码
avalon.scan = function(elem, vmodel) {
elem = elem || root
var vmodels = vmodel ? [].concat(vmodel) : []
scanTag(elem, vmodels)
}
视图模型
视图模型，ViewModel，也经常被略写成VM，是通过avalon.define方法进行定义。生成的对象会默认放到avalon.vmodels对象上。 每个VM在定义时必须指定$id。如果你有某些属性不想监听，可以直接将此属性名放到$skipArray数组中。
var vm = avalon.define({
$id: "test",
a: 111,
b: 222,
$skipAarray: ["b"],
$c: 333,
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;
}
},
array: [1,2,3],
array2:[{e: 1}, {e: 2}]
d: {
k: 111,
$skipArray: ["f"],
f: 2222
}
})
接着我们说一些重要的概念：
- $id， 每个VM都有$id，如果VM的某一个属性是对象（并且它是可监控的），也会转换为一个VM，这个子VM也会默认加上一个$id。 但只有用户添加的那个最外面的$id会注册到avalon.vmodels对象上。
- 监控属性，一般地，VM中的属性都会转换为此种属性，当我们以vm.aaa = yyy这种形式更改其值时，就会同步到视图上的对应位置上。
- 计算属性，定义时为一个对象，并且只存在set,get两个函数或只有一个get一个函数。它是监控属性的高级形式，表示它的值是通过函数计算出来的，是依赖于其他属性合成出来的。
- 监控数组，定义时为一个数组，它会添加了许多新方法，但一般情况下与普通数组无异，但调用它的push, unshift, remove, pop等方法会同步视图。
- 非监控属性，这包括框架添加的$id属性，以$开头的属性，放在$skipArray数组中的属性，值为函数、元素节点、文本节点的属性，总之，改变它们的值不会产生同步视图的效果。
$skipArray 是一个字符串数组，只能放当前对象的直接属性名，想禁止子对象的某个属性的监听，在那个子对象上再添加一个$skipAray数组就行了。
视图里面，我们可以使用ms-controller, ms-important指定一个VM的作用域。
此外，在ms-each, ms-with，ms-repeat绑定属性中，它们会创建一个临时的VM，我们称之为代理VM， 用于放置$key, $val, $index, $last, $first, $remove等变量或方法。
另外，avalon不允许在VM定义之后，再追加新属性与方法，比如下面的方式是错误的：
var vm = avalon.define({
$id: "test",
test1: "点击测试按钮没反应 绑定失败";
});
vm.one = function() {
vm.test1 = "绑定成功";
};
也不允许在define里面直接调用方法或ajax
avalon.define("test", function(vm){
alert(111) //这里会执行两次
$.ajax({ //这里会发出两次请来
async:false,
type: "post",
url: "sdfdsf/fdsfds/dsdd",
success: function(data){
console.log(data)
avalon.mix(vm, data)
}
})
})
应该改成：
var vm = avalon.define({
$id: "test",
aaa: "", //这里应该把所有AJAX都返回的数据都定义好
bbb: "",
})
$.ajax({ //这里会发出两次请来
async:false,
type: "post",
url: "sdfdsf/fdsfds/dsdd",
success: function(data){
for(var i in data){
if(vm.hasOwnProperty(i)){
vm[i] = data[i]
}
}
}
})
我们再看看如何更新VM中的属性(重点)：
<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>
<div ms-controller="update">
<div>{{aaa}}</div>
<div>{{bbb}}</div>
<div>{{ccc}}</div>
<div>{{time | date("yyyy - MM - dd mm:ss")}}</div>
<ul ms-each="simpleArray">
<li>{{el}}</li>
</ul>
<div> <select ms-each="objectArray">
<option ms-value="el.value">{{el.name}}</option>
</select>
</div>
<ol ms-with="object">
<li>{{$key}} {{$val}}</li>
</ol>
</div>
绑定
avalon的绑定（或指令），拥有以下三种类型：
- {{}}插值表达式， 这是开标签与闭标签间，换言之，也是位于文本节点中，innerText里。{{}}里面可以添加各种过滤器（以|进行标识）。值得注意的是{{}}实际是文本绑定(ms-text)的一种形式。
- ms-*绑定属性， 这是位于开标签的内部， 95%的绑定都以这种形式存在。 它们的格式大概是这样划分的"ms" + type + "-" + param1 + "-" + param1 + "-" + param2 + ... + number = value
ms-skip //这个绑定属性没有值 ms-controller="expr" //这个绑定属性没有参数 ms-if="expr" //这个绑定属性没有参数 ms-if-loop="expr" //这个绑定属性有一个参数 ms-repeat-el="array" //这个绑定属性有一个参数 ms-attr-href="http://t.zoukankan.com/xxxx" //这个绑定属性有一个参数 ms-attr-src="http://t.zoukankan.com/xxx/{{a}}/yyy/{{b}}" //这个绑定属性的值包含插值表达式，注意只有少部分表示字符串类型的属性可以使用插值表达式 ms-click-1="fn" //这个绑定属性的名字最后有数字，这是方便我们绑定更多点击事件 ms-click-2="fn" ms-click-3="fn" ms-on-click="fn" //只有表示事件与类名的绑定属性的可以加数字，如这个也可以写成 ms-on-click-0="fn" ms-class-1="xxx" ms-class-2="yyy" ms-class-3="xxx" //数字还表示绑定的次序 ms-css-background-color="xxx" //这个绑定属性有两个参数，但在css绑定里，相当于一个，会内部转换为backgroundColor ms-duplex-aaa-bbb-string="xxx"//这个绑定属性有三个参数，表示三种不同的拦截操作 - data-xxx-yyy="xxx"，辅助指令，比如ms-duplex的某一个辅助指令为data-duplex-event="change"，ms-repeat的某一个辅助指令为data-repeat-rendered="yyy"
作用域绑定(ms-controller, ms-important)
如果一个页面非常复杂，就需要划分模块，每个模块交由不同的ViewModel去处理。我们就要用到ms-controller与ms-important来指定ViewModel了。
我们看下面的例子：
HTML结构
<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>
ViewModel
avalon.ready(function() {
avalon.define({
$id: "AAA",
name: "liger",
color: "green"
});
avalon.define({
$id: "BBB",
name: "sphinx",
color: "red"
});
avalon.define({
$id: "CCC",
name: "dragon" //不存在color
});
avalon.define({
$id: "DDD",
name: "sirenia" //不存在color
});
avalon.scan()
})
可以看出ViewModel在DOM树的作用范围其实与CSS很相似，采取就近原则，如果当前ViewModel没有此字段 就找上一级ViewModel的同名字段，这个机制非常有利于团队协作。
如果从另一个角度来看，由于这种随机组成的方式就能实现类似继承的方式，因此我们就不必在JS代码时构建复杂的继承体系。
类的继承体系是源自后端复杂业务的膨胀而诞生的。早在20世界80年代初期，也就是面向对象发展的初期，人们就非常看重继承这个概念。 继承关系蕴涵的意义是非常深远的。使用继承我们可以基于差异编程，也就是说，对于一个满足我们大部分需求的类，可以创建一个它的子类，重载它个别方法来实现我们所要的功能。只子继承一个类， 就可以重类该类的代码！通过继承，我们可以建立完整的软件结构分类，其中每一个层都可以重用该层次以上的代码。这是一个美丽新世界。
但类继承的缺点也是很明显的，在下摘录一些：
面向对象语言与生俱来的问题就是它们与生俱来的这一整个隐性环境。你想要一根香蕉，但你得到的是一头手里握着香蕉的大猩猩，以及整个丛林。 -- Joe Armstrong
在适合使用复合模式的共有类中使用继承，会把这个类与它的超类永远地束缚在一起，从而人为地限制了子类的性能
类继承的缺点
- 超类改变，子类要跟着改变，违反了“开——闭”原则
- 不能动态改变方法实现，不能在运行时改变由父类继承来的实现
- 破坏原有封装，因为基类向子类暴露了实现细节
- 继承会导致类的爆炸
因此在选择是继承还是组合的问题上，avalon倾向组合。组合的使用范例就是CSS，因此也有了ms-important的诞生。
而ms-important就相当于CSS的important语句，强制这个区域使用此ViewModel，不再往上查找同名属性或方法！
另，为了避免未经处理的原始模板内容在页面载入时在页面中一闪而过，我们可以使用以下样式（详见这里）：
.ms-controller,.ms-important,[ms-controller],[ms-important]{
visibility: hidden;
}
忽略扫描绑定(ms-skip)
这是ms-skip负责。只要元素定义了这个属性，无论它的值是什么，它都不会扫描其他属性及它的子孙节点了。
<div ms-controller="test" ms-skip>
<p
ms-repeat-num="cd"
ms-attr-name="num"
ms-data-xxx="$index">
{{$index}} - {{num}}
</p>
A：<div ms-each="arr">{{yy}}</div>
</div>
模板绑定(ms-include)
如果单是把DOM树作为一个模板远远不够的，比如有几个地方，需要重复利用一套HTML结构，这就要用到内部模板或外部模板了。
内部模板是，这个模板与目标节点是位于同一个DOM树中。我们用一个MIME不明的script标签或者noscript标签（0.94后支持，建议使用它）保存它，然后通过ms-include="id"引用它。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://t.zoukankan.com/avalon.js"></script>
<script>
avalon.define({
$id: "test",
xxx: "引入内部模板"
})
</script>
</head>
<body >
<script type="avalon" id="tpl">
here, {{ 3 + 6 * 5 }}
</script>
<div ms-controller="test">
<p>{{xxx}}</p>
<div ms-include="'tpl'"></div>
</div>
</body>
</html>
注意，ms-include的值要用引号括起，表示这只是一个字符串，这时它就会搜索页面的具有此ID的节点，取其innerHTML，放进ms-include所在的元素内部。否则这个tpl会被当成一个变量， 框架就会在VM中检测有没有此属性，有就取其值，重复上面的步骤。如果成功，页面会出现here, 2的字样。
如果大家想在模板加载后，加工一下模板，可以使用data-include-loaded来指定回调的名字。
如果大家想在模板扫描后，隐藏loading什么的，可以使用data-include-rendered来指定回调的名字。
由于ms-include绑定需要定义在一个元素节点上，它的作用仅仅是一个占位符，提供一个插入位置的容器。 如果用户想在插入内容后，去掉这容器，可以使用data-include-replace="true"。
下面是它们的实现
var vmodels = data.vmodels
var rendered = getBindingCallback(elem.getAttribute("data-include-rendered"), vmodels)
var loaded = getBindingCallback(elem.getAttribute("data-include-loaded"), vmodels)
function scanTemplate(text) {
if (loaded) {
text = loaded.apply(elem, [text].concat(vmodels))
}
avalon.innerHTML(elem, text)
scanNodes(elem, vmodels)
rendered && checkScan(elem, function() {
rendered.call(elem)
})
}
外部模板，通常用于多个页面的复用，因此需要整成一个独立的文件。这时我们就需要通过ms-include-src="http://t.zoukankan.com/src"进行加载。
比如有一个HTML文件tmpl.html，它的内容为：
<div>这是一个独立的页面</div>
<div>它是通过AJAX的GET请求加载下来的</div>
然后我们这样引入它
<div ms-include-src="https://tool.4xseo.com/article/170759.html'tmpl.html'"></div>
有关它的高级应用的例子可见这里利用ms-include与监控数组实现一个树
注意，ms-include-src需要后端服务器支持，因为用到同域的AJAX请求。
数据填充(ms-text, ms-html)
这分两种：文本绑定与HTML绑定，每种都有两个实现方式
<script>
avalon.define({
$id: "test",
text: "<b> 1111 </b>"
})
</script>
<div ms-controller="test">
<div><em>用于测试是否被测除</em>xxxx{{text}}yyyy</div>
<div><em>用于测试是否被测除</em>xxxx{{text|html}}yyyy</div>
<div ms-text="text"><em>用于测试是否被测除</em>xxxx yyyy</div>
<div ms-html="text"><em>用于测试是否被测除</em>xxxx yyyy</div>
</div>
默认情况下，我们是使用{{ }} 进行插值，如果有特殊需求，我们还可以配置它们：
avalon.config({
interpolate:[""]
})
注意，大家不要用<, > 作为插值表达式的界定符，因为在IE6-9里可能转换为注释节点，详见这里
插值表达式{{}}在绑定属性的使用，只限那些能返回字符串的绑定属性，如ms-attr、ms-css、ms-include、ms-class、 ms-href、 ms-title、ms-src等。一旦出现插值表达式，说明这个整个东西分成可变的部分与不可变的部分，{{}}内为可变的，反之亦然。 如果没有{{}}说明整个东西都要求值，又如ms-include="'id'"，要用两种引号强制让它的内部不是一个变量。
类名切换(ms-class, ms-hover, ms-active)
avalon提供了多种方式来绑定类名，有ms-class, ms-hover, ms-active, 具体可看这里
事件绑定(ms-on)
avalon通过ms-on-click或ms-click进行事件绑定，并在IE对事件对象进行修复，具体可看这里
avalon并没有像jQuery设计一个近九百行的事件系统，连事件回调的执行顺序都进行修复（IE6-8，attachEvent添加的回调在执行时并没有按先入先出的顺序执行），只是很薄的一层封装，因此性能很强。
- 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-*
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>有关事件回调传参</title>
<script src="http://t.zoukankan.com/avalon.js" type="text/javascript"></script>
<script>
avalon.ready(function() {
avalon.define({
$id: "simple",
firstName: "司徒",
lastName: "正美",
array: ["aaa", "bbb", "ccc"],
argsClick: function(e, a, b) {
alert(a+ " "+b)
},
loopClick: function(a) {
alert(a)
}
});
avalon.scan();
})
</script>
</head>
<body>
<fieldset ms-controller="simple">
<legend>例子</legend>
<div ms-click="argsClick($event, 100, firstName)">点我</div>
<div ms-each-el="array" >
<p ms-click="loopClick(el)">{{el}}</p>
</div>
</fieldset>
</body>
</html>
另外，这里有一些结合ms-data实现事件代理的技巧，建议事件绑定接口支持事件代理，最简单就是table上可以绑定td的点击事件
显示绑定(ms-visible)
avalon通过ms-visible="bool"实现对某个元素显示隐藏控制，它用是style.display="none"进行隐藏。
插入绑定(ms-if)
这个功能是抄自knockout的，ms-if="bool",同样隐藏，但它是将元素移出DOM。这个功能直接影响到CSS :empty伪类的渲染结果，因此比较有用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ms-if</title>
<script t src="http://t.zoukankan.com/avalon.js"></script>
</head>
<body ms-controller="test">
<ul ms-each-item="array">
<li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>
</ul>
<script type="text/javascript">
avalon.define({
$id: "test",
array: "a,b,c,d,e,f,g".split(",")
});
</script>
</body>
</html>
这里得介绍一下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的作用域的绑定属性，它们的值为VM的$id，它们不会影响avalon继续扫描。接着是ms-if，由于一个页面可能被当成子模块，被不同的VM所作用，那么就会出现有的VM没有某个属性的情况。比如下面的情况：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ms-if</title>
<script src="http://t.zoukankan.com/avalon.js"></script>
</head>
<body ms-controller="Test">
<h1>{{aaa}}</h1>
<ul ms-if="array" ms-each-item="array">
<li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>
</ul>
<script type="text/javascript">
avalon.define('Test', function(vm) {
vm.aaa = "array不存在啊"
});
</script>
</body>
</html>
如果没有ms-if做代码防御，肯定报一大堆错。
接着是 ms-repeat绑定。出于某些原因，我们不想显示数组中的某些元素，就需要让ms-if拖延到它们之后才起作用，这时就要用到ms-if-loop。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ms-if</title>
<script src="http://t.zoukankan.com/avalon.js"></script>
</head>
<body ms-controller="test">
<h1>{{aaa}}</h1>
<ul>
<li ms-repeat="array" ms-if-loop="el">{{ el }}</li>
<li>它总在最后</li>
</ul>
<script type="text/javascript">
avalon.define({
$id: "test",
array: ["aaa", "bbb", null, "ccc"]
});
</script>
</body>
</html>
之后就是其他绑定，但殿后的总是ms-duplex。从ms-if-loop到ms-duplex之间的执行顺序是按这些绑定属性的首字母的小写的ASCII码进行排序，比如同时存在ms-attr与ms-visible绑定，那么先执行ms-attr绑定。如果我们想绑定多个类名，用到ms-class, ms-class-2, ms-class-3, ms-class-1，那么执行顺序为ms-class, ms-class-1, ms-class-2, ms-class-3。如果我们要用到绑定多个点击事件，需要这样绑定：ms-click, ms-click-1, ms-click-2……更具体可以查看源码中的scanTag, scanAttr方法。
双工绑定(ms-duplex)
这功能抄自angular，原名ms-model起不得太好，姑且认为利用VM中的某些属性对表单元素进行双向绑定。
这个绑定，它除了负责将VM中对应的值放到表单元素的value中，还对元素偷偷绑定一些事件，用于监听用户的输入从而自动刷新VM。
对于select type=multiple与checkbox等表示一组的元素， 需要对应一个数组；其他表单元素则需要对应一个简单的数据类型；如果你就是想表示一个开关，那你们可以在radio, checkbox上使用ms-duplex-checked，需要对应一个布尔（在1.3.6之前的版本，radio则需要使用ms-duplex, checkbox使用ms-duplex-radio来对应一个布尔）。
| 新 | 旧(1.3.6之前) | 功能 |
ms-duplex-checked只能应用于radio、 checkbox | ms-duplex只能应用于radio ms-duplex-radiocheckbox 多用于实现GRID中的全选/全不选功能 | 通过checked属性同步VM |
ms-duplex-string应用于所有表单元素 | ms-duplex-text只能应用于radio | 通过value属性同步VM |
ms-duplex-boolean应用于所有表单元素 | ms-duplex-bool只能应用于radio | value为”true”时转为true，其他值转为false同步VM |
ms-duplex-number应用于表单元素 | 没有对应项 | 如果value是数字格式就转换为数值，否则不做转换，然后再同步VM |
ms-duplex相当于ms-duplex-string | ms-duplex在radio相当于ms-duplex-checked 在其他上相当于ms-duplex-string | 见上 |
注意：ms-duplex与ms-checked不能在同时使用于一个元素节点上。
注意：如果表单元素同时绑定了ms-duplex=xxx与ms-click或ms-change，而事件回调要立即得到这个vm.xxx的值，input[type=radio]是存在问题，它不能立即得到当前值，而是之前的值，需要在回调里面加个setTimeout。
有关ms-duplex的详细用法，大家可以通过这个页面进行学习。
<!DOCTYPE html>
<html>
<head>
<title>ms-duplex</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div ms-controller="box">
<ul>
<li><input type="checkbox" ms-click="checkAll" ms-checked="checkAllbool"/>全选</li>
<li ms-repeat="arr" ><input type="checkbox" ms-value="el" ms-duplex="selected"/>{{el}}</li>
</ul>
</div>
<script src="http://t.zoukankan.com/avalon.js" ></script>
<script>
var vm = avalon.define({
$id: "box",
arr : ["1", '2', "3", "4"],
selected : ["2", "3"],
checkAllbool : false,
checkAll : function() {
if (this.checked) {
vm.selected = vm.arr
} else {
vm.selected.clear()
}
}
})
vm.checkAllbool = vm.arr.length === vm.selected.length
vm.selected.$watch("length", function(n) {
vm.checkAllbool = n === vm.arr.size()
})
</script>
</body>
</html>
对于非radio, checkbox, select的控件，我们可以通过data-duplex-changed来指定一个回调，传参为元素的value值，this指向元素本身，要求必须有返回值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>data-duplex-changed</title>
<script src="http://t.zoukankan.com/avalon.js"></script>
</head>
<body ms-controller="duplex">
<input ms-duplex="username" data-duplex-changed="callback">
<script type="text/javascript">
avalon.define({
$id: "duplex",
username : "司徒正美",
callback : function(val){
avalon.log(val)
avalon.log(this)
return this.value = val.slice(0, 10)//不能超过10个字符串
}
});
</script>
</body>
</html>
样式绑定(ms-css)
用法为ms-css-name="value"
注意：属性值不能加入CSS hack与important!
<!DOCTYPE html>
<html>
<head>
<title>by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://t.zoukankan.com/avalon.js"></script>
<script>
avalon.define({
$id: "test",
o: 0.5,
bg: "#F3F"// 不能使用CSS hack，如 bg : "#F3F9