【MVVM】- Avalon 基礎入門案例

Avalon

國產前端大神司徒正美借鑑knockout和angularJS的基礎上開發的mvvm框架，avalon相比knockout和angularJS在運行效率和設備適配上面具備更大的優點，同時具有以上兩種框架的部分特色

avalon控制器做用域

與angualrJS的做用域類似，距離標籤最近聲明的控制器即爲該元素的最終做用控制器，若是存在控制器嵌套，標籤能夠直接獲取外部包裹的控制器的屬性，可是最近的控制器不能與外部控制器的屬性或者方法名一致， 不然會被最近的控制器的屬性和方法覆蓋(最近的控制器的優先級更高)

外觀界面

<div ms-controller="AAAA">
userName:<span>{{aaaa}}</span>
</div>

<br><br>
<div ms-controller="BBBB">
	<div>
	password:<span>{{bbbb}}</span>
	</div>
	<div ms-controller="CCCC">
	CCCC:<span>{{cccc ：bbbb}}</span>
	</div>
	<div ms-important="DDDD">
	DDDD:<span>{{dddd}}:{{cccc}}</span><br>
	<!-- 注意，若是將model的字符串進行鏈接，important失效:cccc元素數據能夠正常顯示 -->
	EEEE:<span>{{dddd:cccc}}</span>
	</div>
</div>

<div ms-skip="FFFF">
FFFF:<span>{{ffff}}</span>
</div>

js操做邏輯

//ms-controller:指定做用域，首先查找定義的controler，若是找不到則向上一級查找
//ms-important不會向上查找
//ms-skip表示avalon不會掃描該元素,做用域下的指令失效
avalon.ready(function(){
	avalon.define({
		$id:"AAAA",
		aaaa:"aaaa"
	});
	avalon.define({
		$id:"BBBB",
		bbbb:"bbbb"
	});
	
	avalon.define({
		$id:"CCCC",
		cccc:"cccc"
	});
	
	avalon.define({
		$id:"DDDD",
		dddd:"dddd"
	});
	
	avalon.define({
		$id:"FFFF",
		ffff:"ffff"
	});
	
	//scan方法是掃描html文檔，將html綁定的屬性、數據和做用域轉換爲avalon處理
	avalon.scan();
});

效果：

avalon與主流的mvvm框架對比

---

Avalon html元素綁定入門

界面

<form ms-controller="test">
<h3>屬性綁定</h3>
<!-- 根據t1的值決定是否添加屬性：ms-attr-屬性名 -->
<label>姓名</label><input ms-duplex="textModel" ms-attr-disabled="t1"><br>
<!-- 若是t1爲true，則綁定readonly屬性 -->
<label>年齡</label><input ms-duplex="age" ms-attr-readonly="t1"><br>

<label>性別</label>
<div>
<!-- 經過sex和value值進行判斷，若是一致則選中 -->
<input type="radio" ms-duplex-string="sex" value="男">男<br>
<input type="radio" ms-duplex-string="sex" value="女">女<br>
</div><br><br>

<!-- 默認選項 -->
工做：<br>
<select>
<option value="IT">IT</option>
<option value="銷售" ms-attr-selected="t2">銷售</option>
<option value="產品">產品</option>
</select><br>

球類運動：<br>
<input type="checkbox" value="option1" ms-attr-checked="t3">籃球<br>
<input type="checkbox" value="option2" ms-attr-checked="t3">羽毛球<br>
<input type="checkbox" value="option3" >足球<br><br>

<a ms-href="path">baidu</a><br>
<a ms-attr-id="id" ms-attr-name="name" ms-href="{{path}}/city/chongqing">百度網</a><br>
<img ms-src="src" ms-attr-title="title" width="200px" height="200px"/>
</form>

js操做邏輯

avalon.ready(function(){
	/*
	*avalon屬性綁定操做;
	類名操做：ms-class
	表單value屬性操做：ms-duplex
	元素固有和自定義屬性：ms-attr  
	ms-href  ms-src:相似ms-text綁定屬性
	*/
	var vm=avalon.define({
		$id:"test",
		textModel:"star",
		t1:true,
		age:20,
		sex:"男",
		t2:true,
		t3:true,
		path:"http://www.baidu.com",
		id:"123456",
		name:"zhangsan",
		src:"d:\NN.jpg",
		title:"bbb"
	});
	avalon.scan();
});

效果：

分析：

• ms-controller:控制器，主要是肯定控制器的做用範圍
• vm=avalon.define({......}):定義控制器的內容(屬性和方法)