avalonjs 中的if else實現的幾種方法

時間 2019-11-17

標籤 avalonjs 實現幾種方法简体版

原文原文鏈接

在學習avalonjs的過程當中,發現模板中並無if else這樣的寫法,不像tempalte ejs這些,因此總結了三種方法來實現,僅供在使用avalonjs的同窗參考,主要是經過ms-if 表達式和方法來實現. javascript

1.開始前的準備

首先是作一個簡單的html做爲基礎 css

<!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就是咱們要用來作判斷的 html

var vm = avalon.define({
	$id: "test",
	type:1
});

2.使用ms-if的方式

最直接的就是avalonjs的綁定ms-if,只是這裏卻沒有ms-else這樣的綁定,應該是處於dom的結構考慮,因此纔沒有這樣的綁定器吧.那麼實現的方法其實也很簡單,兩個ms-if就能夠實現了,也就是寫兩個div,在不一樣的狀況下作不一樣的顯示便可,在html中就能夠實現了. java

<!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就能夠實現了. git

<!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.在模型中定義方法

通常的狀況用前面兩種方法應該都沒有多大問題,若是是遇到一些複雜的判斷,就須要這種方法了,就是在模型中自定義一個方法來處理,這個方法應該稱爲通用的方法吧,裏面就有不少發揮的空間. github

自定義一個方法來處理,問題就簡單了不少,畢竟在js裏面作判斷仍是很容易的事情的,好比if else \表達式\switch ,這些均可以用上,到時候只要return 內容回去就能夠了,那麼這個須要html和js來共同完成. 框架

html的代碼以下: dom

<!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 的內容";
		}
	}
});