迷你MVVM框架 avalonjs 学习教程9、类名操作
ms-class是avalon用得最多的几个绑定之一，也正因为如此其功能一直在扩充中。根据时期的不同，分为旧风格与新风格两种。
旧风格是指ms-class-xxx=”expr”，*ms-class-aaa-bbb=”expr”*。正如第三节《绑定属性与扫描机制》所讲，一个绑定属性分成三部分，第一部分是ms，第二部分是class，第三部分是第二个-之后的所有字符串，它们被称之为param。上面的xxx与aaa-bbb都是我们要处理里的类名。等号后面的expr是一个表达式，根据它们的真假值决定是添加或移除。不过旧风格的缺点非常明显
- 每个ms-class只能控制一个类名，如果有N个类名其实都是由同一个绑定属性控制的，也不得分开写。
- ms-class后面只能接受全部是小写的类名，因为在HTML 规范中，属性名都只能是小写，你就算大写了，它也会转换为小写 。
- 有些类名，我们想动态生成出来。
因此有了新风格一说。现在不推荐使用旧风格了，不过avalon还是非常有节操地继续支持它。
<!DOCTYPE html>
<html>
<head>
<title>旧风格</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"> </script>
<script>
var model = avalon.define({
$id: "ms-class",
toggle: true,
click: function(e) {
model.toggle = !model.toggle
}
})
</script>
<style>
.test{
width:100px;
height:100px;
border:1px solid red;
color:red;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
.aaa{
color:blue;
border:1px solid blue;
}
</style>
</head>
<body ms-controller="ms-class">
<div class="test" ms-class-aaa="toggle" ms-click="click">点我</div>
</body>
</html>
新风格的格式为ms-class=”class:expr”。其中ms-class也可以带第三个参数（因为属性名不能重要，因此需要加一点“杂质”骗过浏览器），但它只能是数值，根据它们的大小决定执行顺序（也见第三节的扫描机制部分），如ms-class-1=”aaa”,ms-class-2=”bbb”。新风格的属性值由冒号拆分两部分，第一部分是类名，类名中可以使用插值表达式（如ms-class=”width{{w}}: isOk”），第二部分是可选，不写（不写时冒号也不用写了）就默认是添加操作，写时就根据其计算结果决定是添加还是移除（如 者ms-class=”red:1+1”）。
<!DOCTYPE html>
<html>
<head>
<title>新风格</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
var model = avalon.define({
$id: "ms-class",
toggle: true,
click: function(e) {
model.toggle = !model.toggle
}
})
</script>
<style>
.test{
width:100px;
height:100px;
border:1px solid red;
color:red;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
.aaa{
color:blue;
border:1px solid blue;
}
</style>
</head>
<body ms-controller="ms-class">
<div class="test" ms-class="aaa:toggle" ms-click="click">点我</div>
<div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc"> 它的名类是aaa bbb ccc </div>
<div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc" > 它的名类是bbb ccc aaa </div>
<div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc"> 它的名类是bbb aaa ccc </div>
<div ms-class="xxx yyy zzz" > 它的名类是xxx yyy zzz </div>
<div ms-class="XXX YYY ZZZ:true" > 它的名类是XXX YYY ZZZ </div> </body>
</html>
此外还有两个绑定，ms-active、 ms-hover。它们分别是用来摸拟:active, :hover效果，用法与ms-class一样，都分新旧风格。ms-active只在点击的那一瞬间有效果，ms-hover只在掠过时有效果，失去焦点或离开目标元素就会移除刚才添加的类名。
<!DOCTYPE html>
<html>
<head>
<title>ms-class</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
<style>
.ms-class div{
display:inline-block;
width:200px;
height:100px;
border: 1px solid black;
}
.active{
background: black;
color: white;
}
.bgRed {
background:palegoldenrod;
}
.hover{
background: red;
color: white;
}
</style>
<script type="text/javascript">
var model = avalon.define({
$id: "test",
w: 500,
h: 200,
bottom: true,
num: "00",
className: "点我",
changeClassName: function() {
model.num = (100 * Math.random()).toFixed(0);
model.className = this.className
}
})
</script>
</head>
<body ms-controller="test" class="ms-class">
<div ms-active="active" >测试:active</div>
<div ms-hover="hover" >测试:hover</div>
<div ms-class="bgRed width{{w}} height{{h}}" ms-css-width="h">
类名通过插值表达式生成<br/>
{{w}} * {{h}}<br/>
<input data-duplex-event="change" ms-duplex="h">
</div>
<p><button type="button" ms-class="test{{num}}" ms-click="changeClassName">{{className}}</button></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
var model = avalon.define({
$id: "test",
color: "red",
toggle: true,
changeToggle: function() {
model.toggle = !model.toggle
},
switchColor: function() {
model.color = model.color === "red" ? "blue" : "red"
}
})
</script>
<style>
.ms-class-test{
background:green;
width:300px;
height:100px;
}
.c-red{
background: red;
}
.c-blue{
background: blue;
}
</style>
</head>
<body ms-controller="test">
<div class="ms-class-test" ms-hover="c-{{color}}:toggle"> </div>
<button ms-click="switchColor"> 点我改变类名</button> <button ms-click="changeToggle"> 点我改变toggle</button>
</body>
</html>
ms-class、 ms-hover、 ms-active涵盖了所有与类名相应的需求，并且使用上比jQuery还简单。最后看一下用它实现斑马线的效果吧。
<!DOCTYPE html>
<html>
<head>
<title>ms-class</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.define({
$id: "test",
array: avalon.range(0, 14)
})
</script>
<style>
.zebra-table{
border-collapse: collapse;
width:400px;
border:1px solid black;
}
.zebra-table td{
border:1px solid black;
text-indent: 1em;
}
.zebra-table .even td{
background:black;
color:white;
}
.zebra-table .hover td{
color: red;
font-weight: bolder;
}
</style>
</head>
<body ms-controller="test" >
<table class="zebra-table">
<tr ms-repeat="array" ms-hover="hover" ms-class="even: $index % 2 == 0"><td>{{$index}}</td><td>{{ new Date - 0 | date("yyyy-MM-dd")}}</td></tr>
</table>
</body>
</html>
迷你MVVM框架 avalonjs 学习教程9、类名操作的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程8、属性操作
属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为 ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
随机推荐
- 谈一谈手机WebApp的fixed属性（手机上的固定栏）【转】
1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...
- 关键词提取算法-TextRank
今天要介绍的TextRank是一种用来做关键词提取的算法,也可以用于提取短语和自动摘要.因为TextRank是基于PageRank的,所以首先简要介绍下PageRank算法. 1.PageRank算法 ...
- Java第七次作业--图形用户界面
Deadline: 2017-5-11 23:00 一.学习要点 认真看书并查阅相关资料,掌握以下内容: 了解GUI开发的相关原理和技巧 熟悉Swint组件的使用 理解事件处理模型 二.作业要求 发布 ...
- hadoop2.x常用端口及定义方法
Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- 如何搭建Spring MVC 框架---Hello World
传送门 现在的Web框架基本都采用了MVC(model-view-Controller)设计模式,其中,Servlet和Filter都可以充当控制器.Spring MVC采用一个Servlet作为控制 ...
- Codeforces 868F. Yet Another Minimization Problem【决策单调性优化DP】【分治】【莫队】
LINK 题目大意 给你一个序列分成k段 每一段的代价是满足\((a_i=a_j)\)的无序数对\((i,j)\)的个数 求最小的代价 思路 首先有一个暴力dp的思路是\(dp_{i,k}=min(d ...
- Web Server部署架构图
一.整体架构图 二.框架的瓶颈 上述框架的瓶颈在存储NFS,现在较多的使用的是GFS分布式存储
- 报表生成poi----java操作java对象生成execl表单
1.Apache POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程式对Microsoft Office格式档案读和写的功能. .NET的开发人员则 ...
- ASP.NET 程序优化
一.SqlDataRead和Dataset的选择 Sqldataread优点:读取数据非常快.如果对返回的数据不需做大量处理的情况下,建议使用SqlDataReader,其性能要比datset好很多. ...
- centeros php 实战
apache 默认安装路径 Fedora Core, CentOS, RHEL:ServerRoot :: /etc/httpdPrimary Config Fle ...