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 .