本节介绍的ms-if指令与ms-visible很相似，都是让某元素“看不见”，不同的是ms-visible是通过CSS实现，ms-if是通过移除插入节点实现。

ms-if的用法与1.×时别无二致，只要值是真，就插入，为假时，就在原位置上替换为一个注释节点做占位符。

注意1： 在avalon1.*中，存在一个叫ms-if-loop的辅助指令，这个在2.0移除了，这个直接使用filterBy过滤器就能实现相似功能。

注意2： 在avalon1.*中，ms-if的优选级是高于ms-repeat循环指令，到avalon2.0，则反过来，ms-for比较高。

<!DOCTYPE HTML>

<html>

    <head>

        <title>ms-if</title>

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

        <script src="./dist/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重新做一下切换卡吧

<!DOCTYPE html>

<html>

    <head>

        <title>ms-if</title>

        <meta charset="UTF-8">

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

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

        <script >

            var vm = avalon.define({

                $id: "test",

                curIndex: 0, //默认显示第一个

                buttons: ['aaa', 'bbb', 'ccc'],

                panels: ["<div>面板1</div>", "<p>面板2</p>", "<strong>面板3</strong>"]

            })

        </script>

        <style>

            button{

                margin:1em 3em;

            }

            .panel div{

                height:200px;

                background: #a9ea00;

            }

            .panel p{

                height:200px;

                background: green;

            }

            .panel strong{

                display:block;

                width:100%;

                height:200px;

                background: #999;

            }

        </style>

    </head>

    <body ms-controller="test" >

        <div>

            <button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button>

        </div>

        <div class='panel' ms-for='(jj, el) in @panels' ms-if='jj === @curIndex' ms-html='el'></div>

    </body>

</html>

avalon2学习教程08插入移除操作的更多相关文章

  1. avalon2学习教程09循环操作

    avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...

  2. avalon2学习教程06样式操作

    avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...

  3. avalon2学习教程05属性操作

    avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...

  4. avalon2学习教程13组件使用

    avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...

  5. avalon2学习教程 03数据填充

    数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...

  6. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...

  7. avalon2学习教程02之vm

    avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...

  8. avalon2学习教程01

    经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能, ...

  9. avalon2学习教程14动画使用

    avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...

随机推荐

  1. XXE注入攻击与防御

    在研究XXE注入攻击之前先了解一下什么是XXE 定义 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括 ...

  2. 进程间通信IPC (InterProcess Communication)

    一.进程间通信的概念 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区, ...

  3. python基础知识-（1）语法基础知识总结(转载）

    1.Python标识符 在 Python 里,标识符有字母.数字.下划线组成. 在 Python 中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. Python 中的标识符是区分大 ...

  4. hadoop分布式集群的搭建

    电脑如果是8G内存或者以下建议搭建3节点集群,如果是搭建5节点集群就要增加内存条了.当然实际开发中不会用虚拟机做,一些小公司刚刚起步的时候会采用云服务,因为开始数据量不大. 但随着数据量的增大才会考虑 ...

  5. jieba gensim 用法

    简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...

  6. 《机器学习实战》AdaBoost算法（手稿+代码）

    Adaboost:多个弱分类器组成一个强分类器,按照每个弱分类器的作用大小给予不同的权重 一.Adaboost理论部分 1.1 adaboost运行过程 注释:算法是利用指数函数降低误差,运行过程通过 ...

  7. Spring MVC 学习笔记10 —— 实现简单的用户管理（4.3）用户登录显示全局异常信息

    </pre>Spring MVC 学习笔记10 -- 实现简单的用户管理(4.3)用户登录--显示全局异常信息<p></p><p></p>& ...

  8. How to CORS enable ArcGIS Server 10.2.1 to Access REST Services without Using proxy.ashx

    http://gis.stackexchange.com/questions/86206/how-to-cors-enable-arcgis-server-10-2-1-to-access-rest- ...

  9. spark 练习

    scala> import org.apache.spark.SparkContext import org.apache.spark.SparkContext scala> import ...

  10. 高程三 DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...