avalon的使用与总结

avalon是前端MVVM框架，将所有前端代码彻底分成两部分，视图的处理通过绑定实现（angular有个更炫酷的名词叫指令），业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。

作用域绑定
ms-controller：
<div ms-controller="AAA"></div>:对应avalon.define({$id=AAA});要加上avalon.scan();才能显示.

ms-controller：可向上一级的html寻找

ms-important：不可向上一级的html寻找

ms-skip:不显示指令

{{？？}}：插值表达式，可以显示avalon的内容

但，也有例外，如下：

avalon.congig({

interpolate:["[[","]]"]

});//用[[]]代替了{{}}

ms-text,ms-html:
<div ms-text="content">content在avalon.define函数中定义的</div>
<div ms-html="content">把字符串转为为html模式例如<b>??</b>会自动地转换为加粗</div>

ms-duplex="prop":双向绑定，当元素为text,password,textarea时，要求prop为一个字符串，当我们改变它的内容时，avalon就会将此元素的value赋给prop

当元素为radio时，要求prop为一个布尔值，当我们改动它的内容时，avalon就会将此元素的check值（布尔）赋给prop.
当元素为checkbox时，要求prop为一个数组，当我们改变它的内容时，avalon就会将此元素的value值push进prop
当元素为select时，要求prop为一个字符串或数组（视multiple的值），当我们选中它的某一个项时，avalon就会将此option元素的value值或text值（没有value时）push进prop
ms-duplex-text="prop",只能用于模拟text控件的行为，要求prop为一个字符串，当我们选中某一个radio时，avalon就会将此元素的value值赋给prop用于实现多选一
ms-duplex-boolean="prop",只能用于radio，要求prop为一个布尔，并且元素的value为ture或flase,当我们选中某一个radio时，avalon就会将此元素的value转换为布尔,赋给对应的prop.
ms-date-duplex-observe="flase",我们可以在元素节点上定义data-duplex-observe="flase"来禁止双向同步

ms-visible,如果它后面跟着的表达式是真的则显示，假的则隐藏

ms-if,如果它后面跟着的表达式为真的则存在，假的则移除、在使用ms-repeat时，如需使用ms-if,则要用ms-if-loop,因为ms-if的等级在ms-repeat之前。

属性操作：

数据缓存：绑定属性ms-data-*:avalon是数据缓存功能与jQuery的data()类似，但不同于jQuery的是：avalon是直接将数据保存到元素节点的data-*属性上。在从data-*属性还原数据时，它会做简单的数据转换，再返回。在ms-data绑定属性中，对象与数组是直接保存在元素节点上的。

属性绑定:

布尔属性绑定：ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked,如果后面所跟的值为ture,则显示该属性。例如ms-attr-disabled="ture";
DOM属性：disabled 属性可设置或返回是否禁用单选按钮。
readonly 属性规定输入字段为只读。
字符串属性绑定：ms-attr-id,ms-attr-name,ms-attr-title,ms-href,ms-src,ms-attr-data-url(自定义)，后面所跟的是插值表达式，例如，ms-attr-id="{{id}}"

类名属性：ms-class,见图片类名属性。ms-active,ms-hover:分别是用来模拟：active,:hover效果，用法与ms-class一样
ms-active：只在点击的那一瞬间有效果
ms-hover:只在掠过时有效果，失去焦点或离开目标元素就会移除刚才添加的类名

拦截器：
ms-duplex监听的是value.
样式操作：ms-css-width,ms-css-height,ms-css-background-color,ms-css-color,ms-css-font-size;

事件操作：ms-click($remove),单击后直接清除,ms-mouseenter,ms-mouseleave,ms-on-input

循环绑定：ms-repeat,ms-each,后者在副元素先绑定

数组循环：ms-repeat,ms-each

对象循环：ms-repeat,ms-with

临时变量：$first,$last.$index,$outer

循环显示数组的临时变量：

循环显示对象的临时变量：

更新数据：

回调函数绑定：data-repeat-rendered,data-with-rendered,data-with-sorted，data-repeat-rendered

监控数组的方法与普通数组没什么不同，它只是被重写了某一部分方法，如 pop, shift, unshift, push, splice，sort, revert。其次添加了四个移除方法，remove, removeAt, removeAll, clear， 及ensure，pushArray, size，set方法。

• pushArray(el), 要求传入一数组，然后将它里面的元素全部到当前数组的末端。
• remove(el), 要求传入一元素，通过全等于比较进行移除。
• removeAt(index), 要求传入一数字，会移除对应位置的元素。
• removeAll(arrayOrFunction), 有三种用法，如果是一个函数，则过滤比较后得到真值的元素， 如果是一数组，则将此数组中与原数组相等于的元素全部移除；如果没有任何参数，则全部清空。
• clear()，相当于removeAll()的第三种方法，清空数组的所有元素。由于需要同步视图的缘故，不能通过vm.array.length = 0的方法来清空元素。
• ensure(el)，只有当数组不存在此元素时，只添加此元素。
• size()，返回数组的长度。由于length属性是固有属性，无法hack，也就无法实现双向绑定，因此请用它来代替length。
• set(index, el)，用于更新某一索引位置中的元素，因为简单数组元素的数组，是不会转换它的元素。

转自：avalon的使用与总结