zoukankan      html  css  js  c++  java

  • avalon视频学习笔记（三）

    一、双向同步，双向绑定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:[]
    12. 		});
    13. 		avalon.scan()
    14. 	})
    15. 	</script>
    16. </head>
    17. <body ms-controller="text">
    18. 	<div>
    19. 		<select ms-duplex="flight" name="" id="">
    20. 			<option value="北京-天津">北京-天津</option>
    21. 			<option value="北京-成都">北京-成都</option>
    22. 			<option value="北京-上海">北京-上海</option>
    23. 			<option value="北京-广州">北京-广州</option>
    24. 		</select>
    25. 	</div>
    26. 	<div>
    27. 		<select ms-duplex="hotel" name="" id="" multiple="true">
    28. 			<option value="广州南站旅店">广州南站旅店</option>
    29. 			<option value="广州怡东酒店">广州怡东酒店</option>
    30. 			<option value="广州泊逸精品酒店">广州泊逸精品酒店</option>
    31. 			<option value="嘉立连锁酒店红星国际店">嘉立连锁酒店红星国际店</option>
    32. 		</select>
    33. 	</div>
    34. 	<div ms-text="flight"></div>
    35. 	<div ms-text="hotel"></div>
    36. </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>
  • 相关阅读:
    【BFS】【HDOJ-1195】Open the Lock
    hadoop经典案例
    eclipse中下载maven插件解决办法
    eclipse中导入maven项目：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project.Maven
    mysql Alter 的问题
    代理模式：利用JDK原生动态实现AOP
    JAVA中关于set()和get()方法的理解及使用
    java 中 Cannot make a static reference to the non-static 解决方法
    maven clean 异常问题
    自定义scoll样式
  • 原文地址：https://www.cnblogs.com/Zjingwen/p/4455736.html
Copyright © 2011-2022 走看看