avalonjs學習筆記（二）

二，viewmodel的綁定

用到ms-controller屬性來進行引用，屬性的值，是viewmodel的id。

（我喜歡用引用這個詞，並且不知道別人怎麼叫這個動作。）

貌似所有標籤都可以用這個屬性，並且符合就近原則和嵌套繼承。

然後給這個標籤下的所有子標籤都可以使用{{}}來引用viewmodel的屬性值。

或者通過ms-系列屬性來綁定viewmodel的屬性值。

綁定可以是多重的，也就是說，我可以把一個屬性綁定到很多的輸入框或者什麼上，之類的吧。

 

拿我自己寫的一個例子說明下

<div ms-controller="myvm">
    <div>{{propertya}}:{{background}}</div>
    <div ms-include="'tpl'" ms-controller="myvm2" ms-visible="visible" ms-css-background="background">

    </div>
    <div>
        <input type="text" ms-duplex="propertya" data-duplex-event="change"/>
        <input type="text" ms-duplex="propertya"/>
    </div>
    <div>{{$sum}}</div>
    <button ms-click="click"/>
</div>
<script>

    avalon.ready(function (){
        avalon.define("myvm",function (ob){
            ob.propertya="abc",
            ob.background="blue",
            ob.visible=false,
            ob.i=10,
            ob.j=30,
            ob.sum=function(){
                return i+j
            }
            ob.click=function(){
                ob.visible=!ob.visible
            }
        })
        avalon.define("myvm2",function (ob){
          //ob.visible=true
            ob.background="red"
        })
        avalon.scan()
    })


</script>
<script type="avalon" id="tpl">
    here, {{ 3 + 6 * 5  }}
</script>

因爲這個例子是一邊實驗一邊在增加，所以有的地方跟現在的沒關係，大概說下。

我有兩個viewmodel，myvm引用在最外層標籤，我們叫它div1

<div ms-controller="myvm">

myvm2引用在它子標籤裏，我們叫它div2

<div ms-include="'tpl'" ms-controller="myvm2" ms-visible="visible" ms-css-background="background">

 

div2裏ms-css-background就會綁定myvm2的background屬性，就是就近原則。

然後div2裏，因爲myvm2沒有visible屬性，ms-visible就綁定到myvm的visible屬性，或者說myvm2繼承了myvm的visible屬性。

然後呢，我有兩個input都綁定到了一個屬性上

<div>
        <input type="text" ms-duplex="propertya" data-duplex-event="change"/>
        <input type="text" ms-duplex="propertya"/>
</div>

無論我修改哪個都會改變另一個。