avalon視頻學習筆記（三）

時間 2019-12-02

標籤 avalon 視頻學習筆記简体版

原文原文鏈接

1、雙向同步，雙向綁定ms-duplex

含義：ms-duplex實現了雙向數據綁定。雙向綁定通俗說，除了負責將ViewModel中的應的值放到表單元素的value中，還對錶單元素偷偷綁定一些事情，用於監聽用戶的輸入從而自動刷新ViewModel。

使用場景一：

當元素爲text、password、textaera時，要求prop爲一個字符串，當咱們改動它的內容時，avalon就會將此元素的value值賦給prop。

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-duplex-prop1</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:"test", username:'felixlu', password:'Abc123', profile:'test string' }); avalon.scan(); }) </script></head><body> <div ms-controller="test"> <input type="text" ms-duplex="username"> <input type="password" ms-duplex="password"> <textarea name="" id="" cols="30" rows="10" ms-duplex="profile"> </textarea> <div ms-text="username"></div> <div ms-text="password"></div> <div ms-text="profile"></div> </div></body>

場景二：

當元素爲radio時，要求prop爲一個布爾，當咱們改動它的內容時，avalon就會將此元素的checkde值（布爾）賦給prop。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     </div>
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-duplex-prop1</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:"test", radios:true }); avalon.scan(); }) </script></head><body> <div ms-controller="test">     <div><input type="radio" ms-duplex="radios" /> <div>radios：<span ms-text="radios"></span></div> </div></body>

場景三：

當元素爲checkbox時，要求prop爲一個數組，當咱們改動它的內容時，avalon就會將此元素的value值push進prop。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-dupelx-checkbox</title> <script type="text/javascript" src="../avalon.min.js"></script> <script> avalon.ready(function () { avalon.define({ $id:'test', hobbies:[] }); avalon.scan(); }) </script></head><body> <div ms-controller="test"> <input ms-duplex="hobbies" type="checkbox" value="籃球" />籃球 <input ms-duplex="hobbies" type="checkbox" value="足球" />足球 <input ms-duplex="hobbies" type="checkbox" value="排球" />排球 <div ms-text="hobbies"></div> </div></body>

場景四：

當元素爲select時，要求prop爲一個字符串或者數組（視multiple的值），當咱們選中它的某一項時，avalon就會將option元素的value值或text值（沒有value時）push進prop。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-dupelx-select</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:"text", flight:'', hotel:[] }); avalon.scan() }) </script></head><body ms-controller="text"> <div> <select ms-duplex="flight" name="" id=""> <option value="北京-天津">北京-天津</option> <option value="北京-成都">北京-成都</option> <option value="北京-上海">北京-上海</option> <option value="北京-廣州">北京-廣州</option> </select> </div> <div> <select ms-duplex="hotel" name="" id="" multiple="true"> <option value="廣州南站旅店">廣州南站旅店</option> <option value="廣州怡東酒店">廣州怡東酒店</option> <option value="廣州泊逸精品酒店">廣州泊逸精品酒店</option> <option value="嘉立連鎖酒店紅星國際店">嘉立連鎖酒店紅星國際店</option> </select> </div> <div ms-text="flight"></div> <div ms-text="hotel"></div></body>

場景五：ms-dupelx-text=「prop」

只能用於radio，用於模擬text控件的行爲，要求prop爲一個字符串，當咱們選中某一個radio時，avalon就會將此元素的value值賦給prop用於實現多選一。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-duplex-text</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:'text', gender:"男" }); avalon.scan();  }) </script></head><body ms-controller="text"> <p> <input ms-duplex-text="gender" type="radio" value="男" />男 <input ms-duplex-text="gender" type="radio" value="女" />女 </p> <div ms-text="gender"></div></body>

場景五：ms-duplex-boolean=「prop」

只能用於radio，要求prop爲一個布爾值，而且元素的value爲「true」或者「false」，當咱們選中某一個radio時，avalon就會將此元素的value轉換爲布爾值，賦給對應的prop。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-duplex-boolean</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:'test', booleans:'true' }); avalon.scan() }) </script></head><body ms-controller="test">是否在線支付： <div> <input ms-duplex-boolean="booleans" type="radio" name="op" value="true" />是 <input ms-duplex-boolean="booleans" type="radio" name="op" value="false" />否 </div> <div ms-text="booleans"></div></body>

場景六：ms-data-duplex-observe="false"

咱們能夠在元素節點上定義data-dupelx-observe="false"來禁止雙向同步。

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
 <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus速"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>ms-data-duplex-observe</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function(){ avalon.define({ $id:'test', username:'felixlu', password:'Abc123', profile:'test string' }); avalon.scan(); }); </script> </head> <body ms-controller="test"> <div> <input type="text" ms-duplex="username" ms-data-duplex-observe="false" /> <input type="password" ms-duplex="password" ms-data-dupelx-observe="flase" /> <textarea ms-duplex="profile"></textarea> </div> <ul> <li ms-text="username"></li> <li ms-text="password"></li> <li ms-text="profile"></li> </ul> </body>

相關標籤/搜索

每日一句

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