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

ms-class的进化的更多相关文章

  1. ASP.NET Linux部署(2) - MS Owin + WebApi + Mono + Jexus

    ASP.NET Linux部署(2) - MS Owin + WebApi + Mono + Jexus 本文承接我的上一篇博文: ASP.NET 5 Linux部署,那篇文章主要是针对最新的ASP. ...

  2. Atitit 软件架构方法的进化与演进cs bs soa roa &#160;msa&#160; attilax总结

    Atitit 软件架构方法的进化与演进cs bs soa roa  msa  attilax总结 1.1. 软件体系架构是沿着单机到 CS 架构,再到 BS 的三层架构甚至多层架构逐步发展过来的,关于 ...

  3. Atitit 编程语言编程方法的进化演进 sp &#160;COP&#160;,AOP&#160;,SOP

    Atitit 编程语言编程方法的进化演进 sp  COP ,AOP ,SOP 1.1.  Sp  oop>>COP ,AOP ,SOP1 1.2. Sp  oop 结构化方法SP(Stru ...

  4. js生成一个不重复的ID的函数的进化之路

    在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://blog.csdn.net/xiamizy/article/details/41521025感兴趣可以去 ...

  5. MS SQL巡检系列&mdash;&mdash;检查外键字段是否缺少索引

    前言感想:一时兴起,突然想写一个关于MS SQL的巡检系列方面的文章,因为我觉得这方面的知识分享是有价值,也是非常有意义的.一方面,很多经验不足的人,对于巡检有点茫然,不知道要从哪些方面巡检,另外一方 ...

  6. MS SQL巡检系列&mdash;&mdash;检查重复索引

    前言感想:一时兴起,突然想写一个关于MS SQL的巡检系列方面的文章,因为我觉得这方面的知识分享是有价值,也是非常有意义的.一方面,很多经验不足的人,对于巡检有点茫然,不知道要从哪些方面巡检,另外一方 ...

  7. 差分进化算法 DE-Differential Evolution

    差分进化算法 (Differential Evolution)   Differential Evolution(DE)是由Storn等人于1995年提出的,和其它演化算法一样,DE是一种模拟生物进化 ...

  8. 群集中的MS DTC分布式事务协调器

    MS DTC在大多数SQL 服务器下都需要安装,若只是安装数据库引擎或Analysis 服务可不安装DTC.如果后需要使用分布式事务,则可在SQL Server群集安装完成后再安装DTC. 一.群集M ...

  9. [Evolutionary Algorithm] 进化算法简介

    进化算法,也被成为是演化算法(evolutionary algorithms,简称EAs),它不是一个具体的算法,而是一个“算法簇”.进化算法的产生的灵感借鉴了大自然中生物的进化操作,它一般包括基因编 ...

  10. python访问MS SqlServer(通过pyodbc)

    #!/usr/bin/env python # -*- coding: utf-8 -*- import pyodbc class MSSQL: """ 封装pyodbc ...

随机推荐

  1. PS切图篇

    一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2. ...

  2. mysql学习(4)-mysqldump备份和恢复数据

    背景 最近在公司做数据迁移方面的工作,使用mysql数据库在测试环境模拟数据迁移,在迁移测试的过程中需要做数据备份和恢复 mysql数据备份和恢复比较简单,可以选择mysqldump工具,这里简单提一 ...

  3. matlab资源

    百度网盘  链接:http://pan.baidu.com/s/1c06ikEW 密码:9dpt包含matlab6.5,7,7.01,7.04,7.1,Matlab2006b(7.3),Matlab  ...

  4. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  5. while:1.兔子生兔子问题 2.打印菱形 3.求100以内质数的和4.洗发水15元一瓶,牙膏5元一支,香皂2元一块,150元刚好花完

    1.兔子生兔子问题: 2.打印菱形 3.求100以内质数的和 4.洗发水15元一瓶,牙膏5元一支,香皂2元一块,150元刚好花完有多少种情况?

  6. jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation

    jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation 此错误与crsf有关

  7. Vue知识点

    1. Vue生命周期图示: 2.插值: 文本:{{ message }}: 纯html:v-html="xxx"; 属性:v-bind:id="xxx"; 使用 ...

  8. [转]DOS特殊字符转义方法

    http://www.robvanderwoude.com/escapechars.php 期望得到的字符 转义后字符 说明 % %% May not always be required in do ...

  9. [转]jquery-confirm

    本文转自:http://craftpip.github.io/jquery-confirm/ Practical Uses These features can practically be used ...

  10. linux apache 自动监护脚本

    1 首先安装curl yum install curl 2 编写shell vi restart_apache.sh 写入一下内容 #!/bin/bashURL="http://127.0. ...