avalon视频学习笔记（五）

一、插入移除处理
    1、绑定属性ms-if
        a、当ms-if的值为真（true）时，就将元素输出到页面里面。
  1. <div ms-controller="text">
  2.  <div ms-if="true">
  3.    根据条件显示内容
  4.  </div>
  5. </div>
  1. <div avalonctrl="test">
  2.  <div>
  3.   根据条件显示内容
  4.  </div>
  5. </div>
        b、如果当ms-if 的值为假（flase）时，就将元素移除dom树
  1. <div ms-controller="text">
  2.  <div ms-if="flase">
  3.   根据条件显示内容
  4.  </div>
  5. </div>
  1. <div avalonctrl="test">
  2.  <!--ms-if-->
  3. </div>
        avalonctrl是为avalon垃圾回收器查找元素所用
    <!--ms-if-->是为了将注释的节点重新，装填会dom树所准备的
  2、ms-if和ms-visible的区别
  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>avaon-ms-if</title>
  8.   <script type="text/javascript" src="../avalon.min.js"></script>
  9.   <script type="text/javascript">
  10. 	avalon.ready(function(){
  11. 		var vmodel = avalon.define({
  12. 			$id:'test',
  13. 			object:{}
  15. 		});
  16. 		
  17. 		setTimeout(function(){
  18. 			vmodel.object = {
  19. 				id:"123",
  20. 				message:"显示！！"
  21. 			}
  22. 		},3000);
  24. 		avalon.scan()
  25. 	});
  26.   </script>
  27.  </head>
  28.  <body>
  29. 	<div ms-controller="test">
  30. 		这里是比较输出的结果{{object.id != null}}
  31. 		<div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div>
  32. 		<div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div>
  33. 	</div>
  34.  </body>
*打开代码调试工具，可以发现
    ms-if是不占用dom节点的，是通过插入删除来控制节点。
    ms-visible是占用dom节点的，是通过display：none和display：block，在dom节点中添加动态样式来控制节点的。
    ms-if比ms-visible更高效
    3、用ms-if来制作toggle选项卡
  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>avalon-ms-if-toggle</title>
  8.   <style type="text/css">
  9. 	div div{
  10. 		width:200px;
  11. 		height:100px;
  12. 	}
  13. 	div.d1{
  14. 		background:red;
  15. 	}
  16. 	div.d2{
  17. 		background:green;
  18. 	}
  19. 	div.d3{
  20. 		background:blue;
  21. 	}
  22.   </style>
  23.   <script type="text/javascript" src="../avalon.min.js"></script>
  24.   <script type="text/javascript">
  25. 	avalon.ready(function(){
  26. 	var vm = avalon.define({
  27. 			$id:'text',
  28. 			show:1,
  29. 			but:function(index){
  30. 				vm.show=index;
  31. 			}
  32. 		});
  33. 		avalon.scan();
  34. 	})
  35.   </script>
  36.  </head>
  37.  <body>
  38. 	<div ms-controller="text">
  39. 		<button ms-click="but(1)">红</button>
  40. 		<button ms-click="but(2)">绿</button>
  41. 		<button ms-click="but(3)">蓝</button>
  42. 		<div class="d1" ms-if="show===1"></div>
  43. 		<div class="d2" ms-if="show===2"></div>
  44. 		<div class="d3" ms-if="show===3"></div>
  45. 	</div>
  46.  </body>





posted @ 2015-04-25 20:00  静文  阅读(887)  评论(0)    收藏  举报