AvalonJS

目录

• AvalonJS
  • 视图模型
  • 绑定
• avalon扫描顺序
  • 样式绑定(ms-css)
  • 数据绑定(ms-data)

AvalonJS

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

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

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

注意：

1. avalon不允许在VM定义之后，再追加新属性与方法
2. 不允许在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>

绑定

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

2. 作用域绑定，就近原则。在选择是继承还是组合的问题上，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>

3. 忽略扫描绑定(ms-skip)
   4。模板绑定(ms-include)
4. 数据填充(ms-text, ms-html)、
5. 事件绑定(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-*属性。