avalon的常見問題

時間 2019-11-16

標籤 avalon 常見問題简体版

原文原文鏈接

隨着avalon的普及，愈來愈多人加入avalon的你們庭。隨之而來的是各類問題。本文在這裏統一解答一下。javascript

使用avalon基本上有幾個方針要堅持html

數據必須先定義後使用，只能VM中定義，不能V中定義。
數據必須先打扁後使用，好比對象的層次不宜太深，數組不能太長。
頁面上不使用太複雜的邏輯，須要的話請封裝成函數，也方便本身或後人維護調試。
IE下方法名，屬性名注意不區分大小寫（由於是VBS）。
IE下方法中的this不必定指向自身。
avalon在domReady時本身執行了一次scan，對於後插入的DOM結構，須要本身手動scan。

SCRIPT1028: 缺乏標識符、字符串或數字

這隻發生於IE6-7，它不支持對象最後一個鍵值對後面添加逗號，如java

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

SCRIPT1041: 名稱重定義

這是avalon在IE6-8使用VBScript對象建立VM對象引發的，VB對象不支持爲對象添加兩個相同的屬性名git


avalon.define("test", function(vm){
  vm.aaa = 1
  avalon.mix(vm, {
     aaa: 2, //這裏出問題了
     bbb: 3
  })
})

此外，因爲VBScript變量名不區分大小寫github


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

這樣也會報名稱重定義 Error!數組

異步重寫空對象出錯

這是用法問題dom

<!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 >this

顯示隱藏切換失敗

<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>