迷你MVVM框架 avalonjs 学习教程6、插入移除处理
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、插入移除处理的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
随机推荐
- ARIMA模型——本质上是error和t-?时刻数据差分的线性模型！！！如果数据序列是非平稳的，并存在一定的增长或下降趋势，则需要对数据进行差分处理!ARIMA（p，d，q）称为差分自回归移动平均模型，AR是自回归， p为自回归项； MA为移动平均，q为移动平均项数，d为时间序列成为平稳时所做的差分次数
https://www.cnblogs.com/bradleon/p/6827109.html 文章里写得非常好,需详细看.尤其是arima的举例! 可以看到:ARIMA本质上是error和t-?时刻 ...
- 021PHP基础知识——代码重用
<?php /** * 代码重用 * include() require() 载入文件 * include() 如果载入的文件不存在,提示警告错误. * require() 如果载入的文件不存在 ...
- day02Java基础学习笔记
自动类型转换:容量小的类型自动转换为容量大的数据类型.数据类型按容量大小排序为: byte,short,char之间不会相互转换,他们三者在计算时首先转换为int类型 1.各种进制的表现形式和特点 二 ...
- Element-ui实现loading的局部刷新
后台管理系统loading的局部刷新 在一次vue+element-ui后台管理系统的项目中,遇到这样一个问题,引入element-ui加载框后,loading会占满整个屏幕,虽然通过改变路由实现了局 ...
- debian 安装deb软件
deb包 deb包是debian,ubuntu等LINUX发行版的软件安装包,是类似于rpm的软件包,而非debian,ubuntu系统不推荐使用deb软件包,因为要解决软件包依赖问题,安装也比较麻烦 ...
- Javascript-自己定义对象转换成JSon后怎样再转换回自己定义对象
man是自己定义的对象,使用var tim = JSON.stringify(man); var newman=JSON.parse(tim)后newman的类型是"object" ...
- vs2013突然没有代码提示功能了。
工具->选项->文本编辑器->C++ ->高级->禁用IntelliSense设置 false 然后选确定.
- 从 Excel 表格粘贴到 浏览器表格中
从 Excel 表格粘贴到 浏览器表格中 由于 Excel 用途广泛,所以在导入时用到很多. 但是更多人的喜欢使用复制粘贴. 在网上找了一圈有找到一个开源项目,可以将 Excel 粘贴到 HTML 中 ...
- centos下memcached安装
memcached是一款高速.分布式的内存缓存系统.其官方主页在http://www.danga.com/memcached/ 1.安装前的准备 要安装memcached,需要有libevent的支持 ...
- 虚拟化环境下的CentOS7网络环境存在的问题
http://dgd2010.blog.51cto.com/1539422/1592821/ 为什么要进行一次测试? 在使用CentOS7的过程中发现网络部分有很多与CentOS6所不同的地方. 1. ...