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

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

<!DOCTYPE HTML>

<html>

    <head>

        <title>ms-if</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="avalon.js" ></script>

        <script>

            var vmodel = avalon.define({

                $id: "test",

                object: {}

            })

            setTimeout(function() {

                vmodel.object = {id: "132", message: "显示！！"}

            }, 3000)

            setTimeout(function() {

                vmodel.object = {}

            }, 5000)

        </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>

</html>

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

"if": function(data, vmodels) {//这里是第一次扫描时的执行函数

    var elem = data.element

    elem.removeAttribute(data.name)

    if (!data.placehoder) {

        data.msInDocument = data.placehoder = DOC.createComment("ms-if")

    }

    data.vmodels = vmodels

    parseExprProxy(data.value, vmodels, data)

},

"if": function(val, elem, data) {//这是每次改变ViewModel对应属性时的执行函数

    var placehoder = data.placehoder

    if (val) { //插回DOM树

        if (!data.msInDocument) {

            data.msInDocument = true

            if(placehoder.parentNode)

                placehoder.parentNode.replaceChild(elem, placehoder)

            }

        }

        if (rbind.test(elem.outerHTML.replace(rlt, "<").replace(rgt, ">"))) {

            scanAttr(elem, data.vmodels)

        }

    } else { //移出DOM树，放进ifSanctuary DIV中，并用注释节点占据原位置

        if (data.msInDocument) {

            data.msInDocument = false

            if(elem.parentNode)

                elem.parentNode.replaceChild(placehoder, elem)

            }

            placehoder.elem = elem

            ifSanctuary.appendChild(elem)

        }

    }

},

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

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js"></script>

        <script >

            var model = avalon.define({

                $id: "test",

                currentIndex: 0,

                toggle: function(index) {

                    model.currentIndex = index

                }

            })

        </script>

        <style>

            button{

                width:150px;

                height:30px;

                line-height: 30px;

                text-align: center;

            }

            .ms-tabs{

                border:1px solid violet;

                width: 430px;

                padding:5px;

                height: 200px;

            }

        </style>

    </head>

    <body ms-controller="test" >

        <button ms-click="toggle(0)">触发器1</button>

        <button ms-click="toggle(1)">触发器2</button>

        <button ms-click="toggle(2)" >触发器3</button>

        <div class="ms-tabs" ms-if="currentIndex === 0">切换卡1<br/>其他内容</div>

        <div class="ms-tabs" ms-if="currentIndex === 1">切换卡2<br/>及司徒正美</div>

        <div class="ms-tabs" ms-if="currentIndex === 2">切换卡3<br/>最后一个了</div>

    </body>

</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. 201621123010《Java程序设计》第3周学习总结

    1.本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写出你认 ...

  2. 项目中一个Jenkins权限配置的过程

    需求:需要不同账号登录,只看到自己需要看到的job,比如: test01账号登录看到tes01t_job test02账号登录,只看到test02_job 分析:目的是不同项目,不希望看到其他项目或者 ...

  3. 20145237 Exp2 后门原理与实践

    20145237<网络对抗>Exp2 后门原理与实践 Windows获得Linux Shell 在Windows下,先使用ipconfig指令查看本机IP: 输入ncat.exe -l - ...

  4. NET Core的代码安全分析工具 - Security Code Scan

    NET Core的代码安全分析工具 - Security Code Scan https://www.cnblogs.com/edisonchou/p/edc_security_code_scan_s ...

  5. linux 下mongodb 3.2.5单机版安装

    mongodb3.0.x的安装教程网上很多,这里主要介绍3.2.5的安装 linux iso 在\\10.10.10.1\ShareDoc\User\yipengzhi\ISO\Centos7.0   ...

  6. nyoj A+B Problem IV

    A+B Problem IV 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着能不能写个程序把这 ...

  7. bzoj3191卡牌游戏

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3191 原本想模拟过程,从t个人推到1个人: 但是怎么转移呢?想状压,可是50位压不到角标里. ...

  8. CentOS7.2部署FTP

    目前Linux大部分部署的FTP服务器都是vsftpd,至于为什么,暂时没什么必要深究. 1.安装vsftpd # yum check-update //检查可更新的程序,也可以不更新直接安装,以防万 ...

  9. 黄聪：Wordpress程序Mysql查询导致CPU100%，页面错误增量飙高解决方案

    最近做的网站,访客一多,CPU就会飙到100%,找了网上很多解决方案,用了下面的方法进行优化: 1.mysql开启慢查询方法: 在my.ini的[mysqld]添加如下语句: log-slow-que ...

  10. SQL 知识及用法备忘录

    ---查询当前数据库一共有多少张表 ) from sysobjects where xtype='U' ---查询当前数据库有多少张视图 ) from sysobjects where xtype=' ...