avalon2學習教程05屬性操作


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM