ms-if是属于流程绑定的一种，如果表达式为真值那么就将当前元素输出页面，不是就将它移出DOM树。它的效果与上一章节的ms-visible效果看起来相似的，但它会影响到:empty伪类，并能更节约性能。ms-if还有一个分支，叫ms-if-loop，它是配合ms-repeat绑定使用，因此以后再说。

我们可以通过以下例子比较一下两者：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>ms-if</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="avalon.js" ></script>
  7.         <script>
  8.             var vmodel = avalon.define({
  9.                 $id: "test",
  10.                 object: {}
  11.             })
  12.  
  13.             setTimeout(function() {
  14.                 vmodel.object = {id: "132", message: "显示！！"}
  15.             }, 3000)
  16.  
  17.             setTimeout(function() {
  18.                 vmodel.object = {}
  19.             }, 5000)
  20.  
  21.         </script>
  22.     </head>
  23.     <body>
  24.         <div ms-controller="test" >
  25.             这是比较输出结果:{{object.id != null}}
  26.             <div ms-visible="object.id != null">
  27.                 这是visible的:
  28.                 <span>{{object.message}}</span>
  29.             </div>
  30.             <div ms-if="object.id != null">
  31.                 这是if的:
  32.                 <span>{{object.message}}</span>
  33.             </div>
  34.         </div>
  35.     </body>
  36. </html>

ms-if的实现比ms-visible复杂多了，如果一开始扫描到此元素，计算其值为false，它就不会再扫描里面的元素，并且立即移除此元素。这正是它比ms-visible性能更优的关键。为了能在重新插入DOM时找到正确的位置，avalon还得创建一个注释节点做路标。而被移除的元素是放在一个叫ifSanctuary的DIV中，方便统一管理。

  1. "if": function(data, vmodels) {//这里是第一次扫描时的执行函数
  2.     var elem = data.element
  3.     elem.removeAttribute(data.name)
  4.     if (!data.placehoder) {
  5.         data.msInDocument = data.placehoder = DOC.createComment("ms-if")
  6.     }
  7.     data.vmodels = vmodels
  8.     parseExprProxy(data.value, vmodels, data)
  9. },
  10.  
  11. "if": function(val, elem, data) {//这是每次改变ViewModel对应属性时的执行函数
  12.     var placehoder = data.placehoder
  13.     if (val) { //插回DOM树
  14.         if (!data.msInDocument) {
  15.             data.msInDocument = true
  16.             if(placehoder.parentNode)
  17.                 placehoder.parentNode.replaceChild(elem, placehoder)
  18.             }
  19.         }
  20.         if (rbind.test(elem.outerHTML.replace(rlt, "<").replace(rgt, ">"))) {
  21.             scanAttr(elem, data.vmodels)
  22.         }
  23.     } else { //移出DOM树，放进ifSanctuary DIV中，并用注释节点占据原位置
  24.         if (data.msInDocument) {
  25.             data.msInDocument = false
  26.             if(elem.parentNode)
  27.                 elem.parentNode.replaceChild(placehoder, elem)
  28.             }
  29.             placehoder.elem = elem
  30.             ifSanctuary.appendChild(elem)
  31.         }
  32.     }
  33. },

最后，我们还是用切换卡例子结束本章吧。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.         <script >
  9.             var model = avalon.define({
  10.                 $id: "test",
  11.                 currentIndex: 0,
  12.                 toggle: function(index) {
  13.                     model.currentIndex = index
  14.                 }
  15.             })
  16.         </script>
  17.         <style>
  18.             button{
  19.                 width:150px;
  20.                 height:30px;
  21.                 line-height: 30px;
  22.                 text-align: center;
  23.             }
  24.             .ms-tabs{
  25.                 border:1px solid violet;
  26.                 width: 430px;
  27.                 padding:5px;
  28.                 height: 200px;
  29.             }
  30.         </style>
  31.  
  32.     </head>
  33.     <body ms-controller="test" >
  34.         <button ms-click="toggle(0)">触发器1</button>
  35.         <button ms-click="toggle(1)">触发器2</button>
  36.         <button ms-click="toggle(2)" >触发器3</button>
  37.         <div class="ms-tabs" ms-if="currentIndex === 0">切换卡1<br/>其他内容</div>
  38.         <div class="ms-tabs" ms-if="currentIndex === 1">切换卡2<br/>及司徒正美</div>
  39.         <div class="ms-tabs" ms-if="currentIndex === 2">切换卡3<br/>最后一个了</div>
  40.     </body>
  41. </html>

迷你MVVM框架 avalonjs 学习教程6、插入移除处理的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  2. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  3. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  4. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  5. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  6. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  7. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  8. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  9. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

随机推荐

  1. ARIMA模型——本质上是error和t-?时刻数据差分的线性模型！！！如果数据序列是非平稳的，并存在一定的增长或下降趋势，则需要对数据进行差分处理!ARIMA（p，d，q）称为差分自回归移动平均模型，AR是自回归， p为自回归项； MA为移动平均，q为移动平均项数，d为时间序列成为平稳时所做的差分次数

    https://www.cnblogs.com/bradleon/p/6827109.html 文章里写得非常好,需详细看.尤其是arima的举例! 可以看到:ARIMA本质上是error和t-?时刻 ...

  2. 转载:几种 hive join 类型简介

    作为数据分析中经常进行的join 操作,传统DBMS 数据库已经将各种算法优化到了极致,而对于hadoop 使用的mapreduce 所进行的join 操作,去年开始也是有各种不同的算法论文出现,讨论 ...

  3. ArcGIS 10 Raster Calculator 在哪儿

    ArcGIS 10 Raster Calculator 在哪儿? 现在大家用的最多的是ArcGIS9.3,所以大家都知道Raster Calculator在ArcToolbox->Spatial ...

  4. 快速切题 sgu136. Erasing Edges

    136. Erasing Edges time limit per test: 0.25 sec. memory limit per test: 4096 KB Little Johnny paint ...

  5. 20155224 2016-2017-2 《Java程序设计》第8周学习总结

    20155224 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 第十四章 NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以设定缓冲区 ...

  6. 将 UWP 中 CommandBar 的展开方向改为向下展开

    在 UWP 中使用 CommandBar 来迅速添加一组功能按钮是非常迅速的,是 UWP 中推荐的交互方案之一.也许你能见到 CommandBar 按你所需向下展开,不过可能更多数情况会看到 Comm ...

  7. .NET移动开发环境搭建

    开发工具:Xamarin Studio 社区版 下载地址 http://www.monodevelop.com/download/ 操作系统要求:Windows7及以上..NET Framework4 ...

  8. LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据 （转）

    http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...

  9. pyspark连接mysql

    from pyspark import SparkContext from pyspark.sql import SQLContext if __name__=="__main__" ...

  10. [转][ASP.net]后台页面刷新

    三种后台刷新页面的方法: // 刷新方法一 Response.AddHeader("); // 刷新方法二 Response.Write("<script language= ...