本节介绍的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插入移除操作的更多相关文章
-
avalon2学习教程09循环操作
avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...
-
avalon2学习教程06样式操作
avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...
-
avalon2学习教程05属性操作
avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...
-
avalon2学习教程13组件使用
avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...
-
avalon2学习教程 03数据填充
数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...
-
avalon2学习教程15指令总结
avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...
-
avalon2学习教程02之vm
avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...
-
avalon2学习教程01
经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能, ...
-
avalon2学习教程14动画使用
avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...
随机推荐
-
SQL获取日期格式
) + ' ' + CONVERT(VARCHAR, DATEPART(hh, GetDate())) + ':' + ) AS Date ),) ),) ),) as DateTime) as [D ...
-
如何选择正确的DevOps工具
坦白的讲:世界上没有哪种工具能够像DevOps这么神奇(或敏捷,或精益).DevOps在开发和运营团队之间建立了完美的合作与沟通,因此与其说这是一种神奇的工具,不如说是一种文化的转变. 然而,团队之间 ...
-
Android Message和obtainMessage的区别
类概述 定义一个包含任意类型的描述数据对象,此对象可以发送给Handler.对象包含两个额外的int字段和一个额外的对象字段,这样可以使得在很多情况下不用做分配工作. 尽管Message的构造器是公开 ...
-
项目经验之:MVVM初学者图形化笔记整理。。。
这个模式,一下子把我的思路给打开..让我眼前一亮..居然可以这样将界面分离得如此彻底........... 大家一起学习... 说说我的感受吧,一个小实例讲述了 MVVM实现原理: 一个简单的例,将两 ...
-
Linux下 nginx + 最新版php5.5 安装配置详解
1.nginx的安装: 首先nginx的安装需要依赖最基础的三个包,这里面我们不设计更多的扩展模块,只是安装最基础的三个包, zlib 此包主要是对http内容进行gzip压缩,减少网络传输流量 PC ...
-
Java良葛格 学习笔记
学习一个新的事物时,如果遇到一些概念无法很快理解,这可能是因为要理解概念会需要其它概念先建立起来,所以先暂时放下这个疑问也是一个学习方法,称之为“存疑” ,在以后的学习过程中待必要的概念学会后,目前的 ...
-
Python验证码通过pytesser识别
Python安装包: 需要安装的包主要有两个: PIL 和 pytesser .tesseract (1).安装PIL:下载地址:http://www.pythonware.com/products/ ...
-
shell的输入和输出
1.echo echo [option] string -e 解析转义字符 -n 回车不换行,linux系统默认回车换行 转移字符 \c \t \f \n #!/bin/bash #echo e ...
-
Dubbo死磕之扩展点加载ExetnsionLoader
dubbo的SPI机制与JDK的SPI机制对比 dubbo一款阿里一款开源的RPC框架,他本身是一款非常复杂的系统,我们主要针对里边的一些核心点来展开分析,其中duboo里的一种核心机制 ...
-
C语言基础一（敲打键盘、寻找资料）
事前声明一点:小编的所有材料都是基础,没有什么大的不同,您若觉得不错的话,可以互相探讨下,毕竟本人也是小雏鸟. 大家在学习C语言.C++类似的高端语言时候,往往都是为了学而学,殊不知为什么而学,或许更 ...