avalonjs 中的if else实现的几种方法

    在学习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 .


    


posted @ 2015-10-05 12:00  subying  阅读(1562)  评论(0)  编辑  收藏  举报