一、插入移除处理
1、绑定属性ms-if
a、当ms-if的值为真（true）时，就将元素输出到页面里面。
<div ms-controller="text"> <div ms-if="true"> 根据条件显示内容 </div></div>
<div avalonctrl="test"> <div> 根据条件显示内容 </div></div>
b、如果当ms-if 的值为假（flase）时，就将元素移除dom树
<div ms-controller="text"> <div ms-if="flase"> 根据条件显示内容 </div></div>
<div avalonctrl="test">-
<!--ms-if-->
</div>
avalonctrl是为avalon垃圾回收器查找元素所用
<!--ms-if-->是为了将注释的节点重新，装填会dom树所准备的
2、ms-if和ms-visible的区别
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>avaon-ms-if</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function(){ var vmodel = avalon.define({ $id:'test', object:{} }); setTimeout(function(){ vmodel.object = { id:"123", message:"显示！！" } },3000); avalon.scan() }); </script> </head> <body> <div ms-controller="test"> 这里是比较输出的结果{{object.id != null}} <div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div> <div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div> </div> </body>
*打开代码调试工具，可以发现
ms-if是不占用dom节点的，是通过插入删除来控制节点。
ms-visible是占用dom节点的，是通过display：none和display：block，在dom节点中添加动态样式来控制节点的。
ms-if比ms-visible更高效
3、用ms-if来制作toggle选项卡
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>avalon-ms-if-toggle</title> <style type="text/css"> div div{ width:200px; height:100px; } div.d1{ background:red; } div.d2{ background:green; } div.d3{ background:blue; } </style> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function(){ var vm = avalon.define({ $id:'text', show:1, but:function(index){ vm.show=index; } }); avalon.scan(); }) </script> </head> <body> <div ms-controller="text"> <button ms-click="but(1)">红</button> <button ms-click="but(2)">绿</button> <button ms-click="but(3)">蓝</button> <div class="d1" ms-if="show===1"></div> <div class="d2" ms-if="show===2"></div> <div class="d3" ms-if="show===3"></div> </div> </body>
