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

avalon视频学习笔记(五)

时间:2015-04-25 20:58:34      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:

一、插入移除处理
    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:{}
  14. });
  15. setTimeout(function(){
  16. vmodel.object = {
  17. id:"123",
  18. message:"显示!!"
  19. }
  20. },3000);
  21. avalon.scan()
  22. });
  23. </script>
  24. </head>
  25. <body>
  26. <div ms-controller="test">
  27. 这里是比较输出的结果{{object.id != null}}
  28. <div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div>
  29. <div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div>
  30. </div>
  31. </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>





avalon视频学习笔记(五)

标签:

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

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