对于视图样式的更新,有以下两种方式:
1、对css的指定属性进行更新
通过avalon中的ms-css-XXX属性,可以在ms-duplex更新vm对象值的的同时,实现对视图样式中指定属性的动态更新。
代码示例:
<div class="panel1" ms-css-width="weight"> <input ms-duplex="weight"></input> </div>通过该段代码,实现通过input输入值的变化,动态改变div标签视图样式的width属性。
2、对标签所使用的css类进行更新
通过avalon中的ms-class属性,可以通过input等控件,动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。
代码示例:
avalon代码:
<script> var model=avalon.define({ $id:"test", style:"panel1", change_class:function(e){ model.style=model.style==="panel1"?"panel2":"panel1" } })html代码:
<body ms-controller="test"> <div ms-class="{{style}}" ></div> <button ms-click="change_class">点我改变类名</button> </body>以上代码实现的功能是通过点击button控件,改变div标签的类。点一下变成panel1类,再点一下变成panel2类.......