avalon2學習教程05屬性操做

時間 2019-11-10

標籤 avalon2 avalon 學習教程屬性简体版

原文原文鏈接

avalon2與avalon1的屬性操做雖然都是使用ms-attr，但用法徹底不同。javascript

avalon1是這樣操做屬性的html

<div ms-attr-aaa='a' ms-attr-bbb='b' ms-attr-ccc='b'></div>

其語法爲java

ms-attr-valueName="vmProp"

有多少個屬性就寫多個ms-attr-。其中不能省略。此外，還存在ms-title, ms-alt，ms-src, ms-href, ms-selected, ms-checked等等縮略寫法。但估計不多人知道，到底哪些屬性能夠縮寫，哪些不能。數組

avalon2從減輕用戶的記憶出發，將你要操做的屬性所有打包成一個對象，並規定，只能屬性值才能使用@開頭的vm屬性。此外，avalon不存在ms-title這樣的縮略寫法。性能

<div ms-attr="{aaa:@a, bbb:@b+11, ccc: @fn(@d,@e)}"></div>

或者spa

<div ms-attr="@attrObj"></div>

attrObj爲vm的一個對象屬性，但這個不太經常使用。
或者code

<div ms-attr="[{@aaa:@a}, {bbb: @b}, @toggle ? {add:"111"}: {}]"></div>

ms-attr直接對應一個數組。這個靈感是來自ReactNative的style指令，它們能夠經過數組，傳入多個樣式對象…………htm

不過不管你怎麼搞，最後你傳的東西能保持avalon內部能將它變回一個對象就好了。對象

有時你的對象很長，須要換行，avalon2也是支持的，即使你寫得像如下這麼噁心，avalon2仍是能認出來。blog

<!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過濾器。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。