在学习avalonjs的过程中,发现模板中并没有if else这样的写法,不像tempalte ejs这些,所以总结了三种方法来实现,仅供在使用avalonjs的同学参考,主要是通过ms-if 表达式和方法来实现.
1.开始前的准备
首先是做一个简单的html作为基础
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script> <title>avalon的if else</title> </head> <body> <div ms-controller="test"> </div> </body> </html>
一些简单的样式
.text1{
color: #f33;
}
.text2{
color: #33f;
}
.text3{
color: #3f3;
}
简单的avalonjs 例子初始化,其中的type就是我们要用来做判断的
var vm = avalon.define({
$id: "test",
type:1
});
2.使用ms-if的方式
最直接的就是avalonjs的绑定ms-if,只是这里却没有ms-else这样的绑定,应该是处于dom的结构考虑,所以才没有这样的绑定器吧.那么实现的方法其实也很简单,两个ms-if就可以实现了,也就是写两个div,在不同的情况下做不同的显示即可,在html中就可以实现了.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script> <title>avalon的if else</title> </head> <body> <div ms-controller="test"> <div class="text1" ms-if="type==0">if 的内容</div> <div class="text1" ms-if="type!=0">else 的内容</div> </div> </body> </html>
3.使用表达式
mvvm的框架都会支持表达式的,avalonjs不例外,实现的方式就是在"{{}}"里面写入表达式进行判断,通过三元运算符来进行判断,现在回过头来想,avalonjs做得还是很强大的.既然是在"{{}}"里面写,那么在html就可以实现了.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test">
<div class="text1" ms-if="type==0">if 的内容</div>
<div class="text1" ms-if="type!=0">else 的内容</div>
<div class="text2">
{{type==0?'if 的内容':'else 的内容'}}
</div>
</div>
</body>
</html>
4.在模型中定义方法
一般的情况用前面两种方法应该都没有多大问题,如果是遇到一些复杂的判断,就需要这种方法了,就是在模型中自定义一个方法来处理,这个方法应该称为通用的方法吧,里面就有很多发挥的空间.
自定义一个方法来处理,问题就简单了很多,毕竟在js里面做判断还是很容易的事情的,比如if else 表达式switch ,这些都可以用上,到时候只要return 内容回去就可以了,那么这个需要html和js来共同完成.
html的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test">
<div class="text1" ms-if="type==0">if 的内容</div>
<div class="text1" ms-if="type!=0">else 的内容</div>
<div class="text2">
{{type==0?'if 的内容':'else 的内容'}}
</div>
<div class="text3">
{{toHtml(type)}}
</div>
</div>
</body>
js的代码如下:
var vm = avalon.define({
$id: "test",
type:1,
toHtml: function(type){
if(type===0){
return "if 的内容";
}else{
return "else 的内容";
}
}
});
5.结束语
像avalonjs这样的框架,有时候看起来限制了用法,其实换一个角度了看却是变得更加灵活了,上面介绍的方法希望能给学习avalonjs的同学一些启发和参考.
上面的例子,写在了runjs里面http://runjs.cn/detail/uibw2aio.本文同步发表在我的个人博客,http://www.subying.com/archives/144.html .