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