learn avalon2

day01

 |--指令：ms-controller，作用：圈定vm的作用范围

 |--指令：ms-duplex，作用：相当于ng-model，定义一个模块

 |--插值表达式：‘{{}}’，作用：它是纯文本指令，用于单向将数据拍到页面上，位于元素内部的innerText中

总结：

  1. MVVM将程序分为两大块，我们需要用avalon.define创建vm，用指令预先指定会变动的部分
  2. ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的。
  3. ms-duplex是双向指令，通过一些事件监听我们的输入操作，从而同步vm。
  4. {{}}是用于输出数据。

　　avalon1的四种数据填充方式：

  • {{expr}}
  • {{expr|html}}(html过滤器的方式)
  • ms-text(与第一的类似)
  • ms-html(与第二的类似)

　　avalon2如今采用三种数据填充方式，即去掉了第二种使用html过滤器的方式。

　　使用插值表达式进行数据填充需要处理的问题：在一些网络较慢的情况下，网页会出现乱码，就是{{@a}}的内容被用户看到了。

　　解决方案：1.添加ms-controller类型，avalon扫描到这里的时候会把该区域的内容先隐藏起来。

　　　　　　　2.使用ms-text，这是最省事有效的解决方法。

　　其他：

　　问题：avalon界定符，"{{}}"与其他插件冲突。

　　解决方案：使用avalon.config({interpolate:["{{","}}"]})，修改interpolate属性，例如:interpolate:["{#","#}"];以解决冲突问题。

　　简单练习：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./avalon.js"></script>
        <script>
            avalon.config({
                interpolate:["{#","#}"]
            });
            var zga = avalon.define({
                $id:"zgatry",
                num:1010
            });
            var vm = avalon.define({
                $id: "test",
                a: 111
            });
            vm.$watch('a', function (newValue, oldValue){
                console.log(vm.a);
                console.log(vm.$model);
            });
        </script>
        <style>
            .ms-controller{
                display:none;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex="@a" />
            <p>{#@a#}</p>
        </div>
        <div ms-controller="zgatry">
            <input ms-duplex="@num" />
            <p>{#@num#}</p>
        </div>
    </body>
</html>

 

posted @ 2016-08-15 08:28  君寻不惑  阅读(157)  评论(0)  编辑  收藏  举报