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>

无论我修改哪个都会改变另一个。