ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中。根据时期的不同,分为旧风格与新风格两种。
旧风格是指正在ms-class后面跟着类外,然后在绑定值中添加表达式,即ms-class-xxx="prop"。其中xxx为一个类名。在jQuery ui中,一些类名非常长,以-连接起来,如ui-widget-content,我们直接把它加在后面好了。比如下例:
<div
ms-class-ui-datepicker-week-end="weekend"
ms-class-ui-state-disabled="disabled"
ms-class-ui-datepicker-unselectable="selected">{{date}}</div>
旧风格使用简单,易上手,只要记得在ms-class-后加类名,=号加表达式,来控制它的添加移除就行了。但缺点也明显:
- 每个ms-class只能控制一个类名,如果有N个类名其实都是由同一个绑定属性控制的,也不得分开写。
- ms-class后面只能接受全部是小写的类名,因为在HTML 规范中,属性名都只能是小写,你就算大写了,它也会转换为小写 。
- 有些类名,我们想动态生成出来。
针对它们,新风格搞出来,它要求ms-class后面什么也不写,或只跟着整数,然后在属性值的左边写类名,中间写一个冒号,右边写表达式。
比如第一个多类名控制的需求,可以这样做:ms-class="aaa bbb ccc:prop"
第2需求,可以这样做:ms-class="AAA className : 1+ 2"。
第3需求,可以这样做:ms-class="aaa width{{w}} height{{h}}: ddd", 当w=200, h=300, ddd为true时,它会为绑定的元素节点添加三个类名,aaa,width200,height300。
如果要用到多个ms-class呢,新风格可以这样做
<div
ms-class="aaa bbb"
ms-class="ui-state-disabled:disabled"
ms-class-="ui-state-disabled:disabled"
ms-class-1="ui-datepicker-ok:test">{{date}}</div>
此外,在新风格中,如果类名是通过插值表达式实现,比如上面的ms-class="aaa width{{w}} height{{h}}: ddd",当w=200时,它会为元素添加width200,然后过段时间,w变成300时,它会去掉之前的width200,再添加width300,非常人性化。详见这里