ms-class的进化

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,非常人性化。详见这里

原文地址:https://www.cnblogs.com/rubylouvre/p/3371107.html