avalon对于视图样式的动态更新

对于视图样式的更新,有以下两种方式:

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

你可能感兴趣的:(avalon对于视图样式的动态更新)