常见问题

    首先我们需要引入IE7.jshttps://github.com/roylory/ie7-js/blob/master/lib/IE7.js

    然后JSON.js

    最后是Promise库

    https://github.com/RubyLouvre/avalon/blob/master/test/promise.js

    当然，前4个常用的库可以打包，或者全部打包

    开发时，最好一边开发一边在IE8下测试（因为IE8下有开发者工具，能模拟IE6的情况），不要全部开发完再测试IE6

    如何隐藏首屏加载页面时出现的花括号

    :在页面上添加一个样式

    1. .ms-controller{
    2.    visibility: hidden
    3. }
    1. <div ms-controller="test" class="ms-controller">{{@aaa}}</div>

    IE6-8下为vm的数组重新赋给一个新数组失败?

    1. vm.arr2 = vm.arr1 //报错

    记住,任何时候,不能将vm中的数组或子对象取出来,再用它们赋给vm的某个数组或子对象,因为放在vm中的数组与子对象已经变成VM了,而VM重写VM不被允许的.

    并且你要保证原数据不被污染,需要使用深拷贝.

    你也可以这样,将原数据转换为纯数据就行了

    1. vm.arr2 = vm.arr1.$model //正常

    为什么我的指令没有效果?

    1. <p title="att-{{ddd}}">例子!</p>

    答:因为avalon只会对ms-*属性敏感, 另外, 花括号里的ddd要加上@,即

    1. <p ms-attr="{title: 'att-'+ @ddd}">例子!</p>

    答: avalon2支持onReady方法

    对表单元素的值输入进行限制

    比如说我们限制只能输入数字

    1. <script>
    2.     avalon.define({
    3.         $id: 'test',
    4.         aaa: 111,
    5.         fix: function(e){
    6.             e.target.value = e.target.value.replace(/\D+/, '')
    7.         }
    8.     })
    10. </script>
    12. <body :controller="test">
    13.     <input :duplex-number="@aaa" :input="@fix"/>{{@aaa}}
    14. </body>

    如果手动执行验证

    答: ms-validate提供了各种全自动的验证.但可能大家需要手动执行验证表单在ms-validate的配置对象上添加一个onManual,页面被扫描后,你就可能拿这个方法来自己执行验证

    1. <!doctype html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>Drag-Drop</title>
    6.     </head>
    7.     <body>
    8.         <div ms-controller="validate1">
    9.             <form ms-validate="@validate">
    10.                 <p><input ms-duplex="@aaa" placeholder="username"
    12.                 <p><input type="password" id="pw" placeholder="password"
    13.                           ms-rules='{required:true}' 
    14.                           ms-duplex="@bbb" /></p>
    15.                 <p><input type="password" 
    16.                           ms-rules="{required:true,equalto:'pw'}" placeholder="再填一次"
    17.                           ms-duplex="@ccc | change" /></p>
    18.                 <p><input type="submit" value="submit"/></p>
    19.             </form>
    20.         </div>
    21.         <script>
    22. var vm = avalon.define({
    23.     $id: "validate1",
    24.     aaa: "",
    25.     bbb: '',
    26.     ccc: '',
    27.     validate: {
    28.         onManual:avalon.noop,//IE6-8必须指定,avalon一会儿会重写这方法
    29.         onError: function (reasons) {
    30.             reasons.forEach(function (reason) {
    31.                 console.log(reason.getMessage())
    32.             })
    33.         },
    34.         onValidateAll: function (reasons) {//它会被onManual调用
    35.             if (reasons.length) {
    36.                 console.log('有表单没有通过')
    37.             } else {
    38.                 console.log('全部通过')
    39.             }
    40.         }
    41.     }
    42. })
    44. setTimeout(function(){
    45. })
    46.         </script>
    47.     </body>
    48. </html>

    页面用了avalon后, 元素间没有距离了

    答: 因为avalon在页面加载好后,会清掉所有空白文本,减少页面的节点数,从而减少以后diff的节点个数. 详见.

    答: 最好指定全局不重复的$id,特别在ms-for循环中,必须指定$id

    2. <html>
    3. <head>
    4.     <title></title>
    5.     <meta charset="UTF-8">
    6.     <script src="../dist/avalon.js"></script>
    7.     <script>
    8.         var vm = avalon.define({
    9.             $id: 'test',
    10.             tests: [0,1]
    11.         })
    12.     avalon.component('ms-button', {
    13.         template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
    14.         defaults: {
    15.             buttonText: "默认内容"
    16.         },
    17.         soleSlot: 'buttonText'
    18.     })
    19.      </script>
    20. </head>
    21. <body>
    22. <ul ms-controller="test">
    23.      <li ms-for="(index,test) in @tests">
    24.         <span ms-text="test"></span>
    25.         <wbr ms-widget='{is:"ms-button",$id:"btn_"+index}'/>
    26.     </li>
    27. </ul>
    28. </body>
    29. </html>

    ajax提交出问题

    请确保你提交的数据是纯JS数据，而不是vm。请见

    为什么我的日期不能同步

    1. var vm = avalon.define({
    2.   $id:'aaa',
    3.   date: new Date
    4. })
    6. setTimeout(function(){
    7. }, 1000)

    答: 因为avalon只会对number, string, boolean, 纯对象, 纯数组这几个类型同步, 其他类型需要转换.将上面的new Date改成new Date - 0即可

    如何将页面模块化？

    : https://github.com/RubyLouvre/avalon/issues/1655