avalon的常见问题

随着avalon的普及，越来越多人加入avalon的大家庭。随之而来的是各种问题。本文在这里统一解答一下。

使用avalon基本上有几个方针要坚持

数据必须先定义后使用，只能VM中定义，不能V中定义。
数据必须先打扁后使用，比如对象的层次不宜太深，数组不能太长。
页面上不使用太复杂的逻辑，需要的话请封装成函数，也方便自己或后人维护调试。
IE下方法名，属性名注意不区分大小写（因为是VBS）。
IE下方法中的this不一定指向自身。
avalon在domReady时自己执行了一次scan，对于后插入的DOM结构，需要自己手动scan。

SCRIPT1028: 缺少标识符、字符串或数字

这只发生于IE6-7，它不支持对象最后一个键值对后面添加逗号，如

 vm.$bOpts = {
         header: "提示信息title",
         content: "提示信息content",
  }

SCRIPT1041: 名称重定义

这是avalon在IE6-8使用VBScript对象创建VM对象引起的，VB对象不支持为对象添加两个相同的属性名

 
avalon.define("test", function(vm){
  vm.aaa = 1
  avalon.mix(vm, {
     aaa: 2, //这里出问题了
     bbb: 3
  })
})

此外，由于VBScript变量名不区分大小写

 
vm.user = {username: 'lili', userName: 'lilililili'}

这样也会报名称重定义 Error!

异步重写空对象出错

这是用法问题

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js" type="text/javascript"></script>
        <script>
            var model = avalon.define("test", function(vm) {
                vm.data = {}
            })
            setTimeout(function() {
                var data = {
                    a: 1,
                    b: 2,
                    c: 3
                }
              model.data = data //这样正常
             // avalon.mix(model.data, data) //这样会报错
            }, 1000)
        </script>
        <style>
            #aaa{
                width: 100%;
                height:200px;
                background:green;
            }
        </style>
    </head>
    <body ms-controller="test">
       <input ms-duplex="data.a"/>
    </body>
</html>

事件回调的this对象$model, $vmodels不见了的问题

1.3.5已经废掉，源码搜data.param.replace(/-\d+$/, "") ，加上这几行

try{
     elem.$vmodel = vmodels[0]
     elem.$vmodels = vmodels
}catch(e){}

或者通过ms-click=callback(avalon.vmodels.xxx)传入你的$vmodel

放在button标签的事件点击没有生效

button标签默认会提交页面，产生跳转，因此需要指定type="button"，即<buttton type=button ms-click=check >

显示隐藏切换失败

<div class="inp,inte" ms-visible="integralCount > 0 && intergralCount > maxIntegral + spendIntegral" >
已超出可使用积分({{maxIntegral/100}}元),请重新输入
<div>

原因，不要在视图的指令里面写&& , ||, 请封装为函数

<div class="inp,inte" ms-visible="isVisible(integralCount, maxIntegral ,spendIntegral)" >
已超出可使用积分({{maxIntegral/100}}元),请重新输入
<div>

交互数组中两个元素的位置失败

原因，只能通过数组方法，比如splice进行移出插入操作

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>
            Avalon splice issue
        </title>
        <meta charset="utf-8">
    </head>
    <body>
        <ul ms-controller="test">
            <li ms-repeat="items">{{ el.name }}</li>
        </ul>
        <script src="avalon.js"></script>
        <script>
var test = avalon.define('test', function(vm) {
    vm.items = [
        {
            name: 'First lady'
        },
        {
            name: 'Second boy'
        },
        {
            name: 'Third guy'
        }
    ];
});
 
var temp = test.items.splice(2, 1);
test.items.splice(1, 0, temp[0].$model);//如果是简单数据类型,就不需要.$model
        </script>
    </body>
</html>

IE6-8下报window.execScript 这一行错误

、

可能是你的VM上定义了一个很大的数组引发的

vm.err大IE6-8下报错

type, err, erm, me是VBScript关键字

ms-controller="aaa"，aaa这个VM只能应用一个元素上，页面上不能出现一个VM同时应用于两个元素

低版本IE使用VBScript，不支持未婚先孕！

如有更多问题，请统一在这里提 https://github.com/RubyLouvre/avalon/issues/509