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>
