avalon2與avalon1的屬性操作雖然都是使用ms-attr,但用法完全不一樣。
avalon1是這樣操作屬性的
其語法為
ms-attr-valueName="vmProp"
有多少個屬性就寫多個ms-attr-。其中不能省略。此外,還存在ms-title, ms-alt,ms-src, ms-href, ms-selected, ms-checked等等縮略寫法。但估計很少人知道,到底哪些屬性可以縮寫,哪些不能。
avalon2從減輕用戶的記憶出發,將你要操作的屬性全部打包成一個對象,並規定,只能屬性值才能使用@開頭的vm屬性。此外,avalon不存在ms-title這樣的縮略寫法。
或者
attrObj為vm的一個對象屬性,但這個不太常用。
或者
ms-attr直接對應一個數組。這個靈感是來自ReactNative的style指令,它們可以通過數組,傳入多個樣式對象…………
不過無論你怎么搞,最后你傳的東西能保持avalon內部能將它變回一個對象就行了。
有時你的對象很長,需要換行,avalon2也是支持的,即便你寫得像以下這么惡心,avalon2還是能認出來。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="./dist/avalon.js"></script>
<script >
var vm = avalon.define({
$id: "test",
title:111,
src: "222",
lang: 333
})
</script>
</head>
<body ms-controller="test" >
<div aaa='ddd' bbb=333
ms-attr='{title: @title,
ddd:@src,
lang:@lang}' >{{
@src ? 333: 'empty'
}}</div>
<input ms-duplex="@src"/>
</body>
</html>
但為了性能起見,ms-attr最好還是保持在一行吧。
avalon2的ms-attr可以支持過濾器,但沒有提供現成的過濾器,雖然用戶進行編寫。不過需要注意的是,這個過濾器要處理的是{title:'111',ddd: '222', lang:222}這樣的對象,而不是一個字符串。比如我們要將需要個屬性轉換成日期格式,你可以在你的過濾器里調用avalon自帶的date過濾器。
