在学习avalonjs的过程中,发现模板中并没有if else这样的写法,不像tempalte ejs这些,所以总结了三种方法来实现,仅供在使用avalonjs的同学参考,主要是通过ms-if 表达式和方法来实现.
首先是做一个简单的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
});
最直接的就是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>
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>
一般的情况用前面两种方法应该都没有多大问题,如果是遇到一些复杂的判断,就需要这种方法了,就是在模型中自定义一个方法来处理,这个方法应该称为通用的方法吧,里面就有很多发挥的空间.
自定义一个方法来处理,问题就简单了很多,毕竟在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 的内容"; } } });
像avalonjs这样的框架,有时候看起来限制了用法,其实换一个角度了看却是变得更加灵活了,上面介绍的方法希望能给学习avalonjs的同学一些启发和参考.
上面的例子,写在了runjs里面.本文同步发表在我的个人博客,http://www.subying.com/archives/144.html .