zoukankan      html  css  js  c++  java
  • 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,非常人性化。详见这里

  • 相关阅读:
    DIV编辑器中当keydowm时获得内部其他元素的位置
    javascript 比较运算符分析
    JS编码注意事项,不断更新中
    ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome
    keycode对应主要键的关系
    关于jquery的remove方法
    根据EntityFramework写的重写sql语句的类
    查询sql表的详细信息
    让div span等元素能响应键盘事件
    你会用英语吵架吗?(学会99句,走遍全世界)
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3371107.html
Copyright © 2011-2022 走看看