常见问题

如何兼容到IE6

avalon只是提供数据绑定功能，没有JS动画，AJAX等模块。这需要其他库来提供，此外，IE的低版本不支持JSON，XMLHttpRequest对象，高版本不支持Promise。这需要我们额外引入其他库来支持

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

然后JSON.jshttps://github.com/bestiejs/json3/tree/master/lib

最后是Promise库

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

  1. <script src="./pathtoie7/IE7.js"></script>
  2. <script src="./pathtojson/json.js"></script>
  3. <script src="./pathtopromise/promise.js"></script>
  4. <script src="./pathtoavalon2/avalon2.js"></script>
  5. <script src="./pathtoyourcode/main.js"></script>

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

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

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

答:在页面上添加一个样式

  1. .ms-controller{
  2.    visibility: hidden
  3. }

使用在ms-controller, ms-important的元素上加上这个ms-controller类名

  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 = avalon.mix(true, [], arr1)
  2. vm.obj2 = avalon.mix(true, {}, obj1)

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

  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. var vm = avalon.define({
  2.    $id: 'test',
  3.     ddd: false
  4. })
  5. vm.$watch('onReady', function(){
  6.  //当test这个区域第一次扫描后会被执行
  7. })

详见API文档页

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

答: avalon提供了4个转换器,那是将value值上传到vm时用,也提供了许多格式式过滤器,但在ms-duplex格式化很容易死循环,因此建议在另加input事件做处理.

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

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

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

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

组件的注意事项

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

  1. <!DOCTYPE html>
  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. function submitData(){
  2.     var data = vm.Item.$model //如果Item是数组，在IE6－8，请改用
  3.     // data = vm.Item.toJSON(), 如果想提交整个vm，请改用
  4.     // data = vm.$model
  5.     $.ajax({
  6.           url: '../sdfwds/dsfds/dsfsd.action',
  7.           data:data,
  8.           type: 'GET',
  9.           success: function(){
  11.           }
  13.     })
  14. }

为什么我的日期不能同步

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

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

如何将页面模块化？

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