码迷,mamicode.com
首页 > 其他好文 > 详细

avalon视频学习笔记(三)

时间:2015-04-25 13:29:48      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

一、双向同步,双向绑定ms-duplex
    含义:ms-duplex实现了双向数据绑定。双向绑定通俗说,除了负责将ViewModel中的应的值放到表单元素的value中,还对表单元素偷偷绑定一些事情,用于监听用户的输入从而自动刷新ViewModel。
    使用场景一:
        当元素为text、password、textaera时,要求prop为一个字符串,当我们改动它的内容时,avalon就会将此元素的value值赋给prop。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-duplex-prop1</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script type="text/javascript">
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:"test",
  9. username:‘felixlu‘,
  10. password:‘Abc123‘,
  11. profile:‘test string‘
  12. });
  13. avalon.scan();
  14. })
  15. </script>
  16. </head>
  17. <body>
  18. <div ms-controller="test">
  19. <input type="text" ms-duplex="username">
  20. <input type="password" ms-duplex="password">
  21. <textarea name="" id="" cols="30" rows="10" ms-duplex="profile">
  22. </textarea>
  23. <div ms-text="username"></div>
  24. <div ms-text="password"></div>
  25. <div ms-text="profile"></div>
  26. </div>
  27. </body>
    场景二:
        当元素为radio时,要求prop为一个布尔,当我们改动它的内容时,avalon就会将此元素的checkde值(布尔)赋给prop。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-duplex-prop1</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script type="text/javascript">
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:"test",
  9. radios:true
  10. });
  11. avalon.scan();
  12. })
  13. </script>
  14. </head>
  15. <body>
  16. <div ms-controller="test">
  17.     <div><input type="radio" ms-duplex="radios" /></div>
  18. <div>radios:<span ms-text="radios"></span></div>
  19. </div>
  20. </body>
    场景三:
        当元素为checkbox时,要求prop为一个数组,当我们改动它的内容时,avalon就会将此元素的value值push进prop。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-dupelx-checkbox</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script>
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:‘test‘,
  9. hobbies:[]
  10. });
  11. avalon.scan();
  12. })
  13. </script>
  14. </head>
  15. <body>
  16. <div ms-controller="test">
  17. <input ms-duplex="hobbies" type="checkbox" value="篮球" />篮球
  18. <input ms-duplex="hobbies" type="checkbox" value="足球" />足球
  19. <input ms-duplex="hobbies" type="checkbox" value="排球" />排球
  20. <div ms-text="hobbies"></div>
  21. </div>
  22. </body>
    场景四:
        当元素为select时,要求prop为一个字符串或者数组(视multiple的值),当我们选中它的某一项时,avalon就会将option元素的value值或text值(没有value时)push进prop。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-dupelx-select</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script type="text/javascript">
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:"text",
  9. flight:‘‘,
  10. hotel:[]
  11. });
  12. avalon.scan()
  13. })
  14. </script>
  15. </head>
  16. <body ms-controller="text">
  17. <div>
  18. <select ms-duplex="flight" name="" id="">
  19. <option value="北京-天津">北京-天津</option>
  20. <option value="北京-成都">北京-成都</option>
  21. <option value="北京-上海">北京-上海</option>
  22. <option value="北京-广州">北京-广州</option>
  23. </select>
  24. </div>
  25. <div>
  26. <select ms-duplex="hotel" name="" id="" multiple="true">
  27. <option value="广州南站旅店">广州南站旅店</option>
  28. <option value="广州怡东酒店">广州怡东酒店</option>
  29. <option value="广州泊逸精品酒店">广州泊逸精品酒店</option>
  30. <option value="嘉立连锁酒店红星国际店">嘉立连锁酒店红星国际店</option>
  31. </select>
  32. </div>
  33. <div ms-text="flight"></div>
  34. <div ms-text="hotel"></div>
  35. </body>
    场景五:ms-dupelx-text=“prop”
        只能用于radio,用于模拟text控件的行为,要求prop为一个字符串,当我们选中某一个radio时,avalon就会将此元素的value值赋给prop用于实现多选一。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-duplex-text</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script type="text/javascript">
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:‘text‘,
  9. gender:"男"
  10. });
  11. avalon.scan();
  12. })
  13. </script>
  14. </head>
  15. <body ms-controller="text">
  16. <p>
  17. <input ms-duplex-text="gender" type="radio" value="男" />
  18. <input ms-duplex-text="gender" type="radio" value="女" />
  19. </p>
  20. <div ms-text="gender"></div>
  21. </body>
    场景五:ms-duplex-boolean=“prop”
        只能用于radio,要求prop为一个布尔值,并且元素的value为“true”或者“false”,当我们选中某一个radio时,avalon就会将此元素的value转换为布尔值,赋给对应的prop。
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>avalon-duplex-boolean</title>
  4. <script type="text/javascript" src="../avalon.min.js"></script>
  5. <script type="text/javascript">
  6. avalon.ready(function () {
  7. avalon.define({
  8. $id:‘test‘,
  9. booleans:‘true‘
  10. });
  11. avalon.scan()
  12. })
  13. </script>
  14. </head>
  15. <body ms-controller="test">
  16. 是否在线支付:
  17. <div>
  18. <input ms-duplex-boolean="booleans" type="radio" name="op" value="true" />
  19. <input ms-duplex-boolean="booleans" type="radio" name="op" value="false" />
  20. </div>
  21. <div ms-text="booleans"></div>
  22. </body>
    场景六:ms-data-duplex-observe="false"
        我们可以在元素节点上定义data-dupelx-observe="false"来禁止双向同步。
  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="Generator" content="EditPlus速">
  4. <meta name="Author" content="">
  5. <meta name="Keywords" content="">
  6. <meta name="Description" content="">
  7. <title>ms-data-duplex-observe</title>
  8. <script type="text/javascript" src="../avalon.min.js"></script>
  9. <script type="text/javascript">
  10. avalon.ready(function(){
  11. avalon.define({
  12. $id:‘test‘,
  13. username:‘felixlu‘,
  14. password:‘Abc123‘,
  15. profile:‘test string‘
  16. });
  17. avalon.scan();
  18. });
  19. </script>
  20. </head>
  21. <body ms-controller="test">
  22. <div>
  23. <input type="text" ms-duplex="username" ms-data-duplex-observe="false" />
  24. <input type="password" ms-duplex="password" ms-data-dupelx-observe="flase" />
  25. <textarea ms-duplex="profile"></textarea>
  26. </div>
  27. <ul>
  28. <li ms-text="username"></li>
  29. <li ms-text="password"></li>
  30. <li ms-text="profile"></li>
  31. </ul>
  32. </body>




avalon视频学习笔记(三)

标签:

原文地址:http://www.cnblogs.com/Zjingwen/p/4455736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!