【MVVM】- Avalon 經常使用指令用法

時間 2019-11-17

標籤 MVVM avalon 經常使用指令用法简体版

原文原文鏈接

Avalon 經常使用指令

ms-visible、ms-if

ms-visible:樣式改變display:block
ms-if 性能更高，若頁面不顯示則註釋標記, ms-if 還作其餘的邏輯控制

css樣式css

div{
height:100px;
width:260px;
}

div.d1{
background:red;
}

div.d2{
background:green;
}

外觀jquery

<body ms-controller="test">
<div class="d1" ms-visible="object.id!=null">ms-visible{{object.message}}</div>
<div class="d2" ms-if="object.id!=null">ms-if{{object.message}}</div>
</body>

js操做邏輯數組

avalon.ready(function(){
	/*
	 *ms-if:dom樹添加節點  ms-visible:樣式改變display:block
	 *ms-if性能更高，若是不顯示現實<!--ms-if-->註釋標記
	 */
	var vm=avalon.define({
		$id:"test",
		object:{}
	});
	
	setTimeout(function(){ //設置一個定時器爲了看出dom元素的先後對比
		vm.object={id:"123",message:"顯示"};
	}, 10000);
	avalon.scan();
});

效果：瀏覽器

ms-duplex 雙向綁定

avalon表單元素數據的雙向綁定緩存

css樣式dom

.ms-controller{
	visibility: hidden;
}

界面函數

<body ms-controller="test" class="ms-controller">
   <input ms-duplex="name">
   <input ms-duplex="passwd"><br>
  
   <ul>
   <li>{{name}}</li>
   <li>{{passwd}}</li>
   <li>{{name+" "+passwd+"!"}}</li>
   </ul><br>
   
   <!-- 單選框的默認check布爾值,布爾值變量綁定 -->
   <input type="radio" ms-duplex="isSure"/><span>{{isSure}}</span><br><br>
   
   <!-- 
      ms-duplex-value:表示fruit和radio的value屬性綁定，更改check的默認綁定:
      ms-duplex-value等價於ms-duplex-text：單選框模仿文本框的行爲，對應value屬性，設置默認值
      value:對應元素被綁定的屬性名
      ms-duplex-boolean:對應value屬性，設置布爾值
    -->
   <input type="radio" ms-duplex-value="fruit" value="蘋果" name="fruit">蘋果
   <input type="radio" ms-duplex-value="fruit" value="雪梨" name="fruit">雪梨
   <input type="radio" ms-duplex-value="fruit" value="香蕉" name="fruit">香蕉<br>
   <span>{{fruit}}</span><br>
   
   <!-- ms-duplex-text綁定vm中的gender值，若是一致存在匹配的值則默認賦值顯示 -->
   <input type="radio" value="female" ms-duplex-text="gender">女<br>
   <input type="radio" value="male" ms-duplex-text="gender">男<br>
     性別：{{gender}}<br><br>
   
   
   <!-- 綁定單選框和isPay變量 -->
   <input type="radio" ms-duplex-boolean="isPay" value="true">是<br>
   <input type="radio" ms-duplex-boolean="isPay" name="false">否<br>
     是否付款：{{isPay}}<br><br>
   
   <br>
   <input type="checkbox" ms-duplex="hobbies" value="PingPong" name="hobby">乒乓球<br>
   <input type="checkbox" ms-duplex="hobbies" value="Bedminton" name="hobby">羽毛球<br>
   <input type="checkbox" ms-duplex="hobbies" value="Basketball" name="hobby">籃球<br>
   <span>{{hobbies}}</span>
   
   <br><br>
   <!-- select multiple屬性默認爲false，值只須要string接收便可 -->
   <select ms-duplex="airLine" >
   <option value="beijing-guangzhou">北京-廣州</option>
   <option value="beijing-shenzhen">北京-深圳</option>
   <option value="beijing-shanghai">北京-上海</option>
   </select>
   <span ms-text="airLine"></span><br>
   
   <select ms-duplex="hotel" multiple="multiple">
   <option value="廣州白雲商務酒店">廣州白雲商務酒店</option>
   <option value="深圳紅樹灣酒店">深圳紅樹灣酒店</option>
   <option value="上海7天假日酒店">上海7天假日酒店</option>
   </select>
   <span>{{hotel}}</span>
</body>

js操做邏輯oop

/*
 * ms-duplex:雙向數據綁定，viewModel中對應的值放在表單元素的value中，還對錶單元素偷偷綁定一些事件，
 用於監聽用戶的轉入從而自動刷新viewModel
 取消雙向同步：ms-data-duplex-observe="false" 
 */
 avalon.ready(function(){
	 
	var vm= avalon.define({
		    $id:"test",
		    name:"hello",
		    passwd:"world",
		    profile:"",
		    isSure:false,
		    fruit:"",
		    hobbies:[],
		    airLine:"",
		    hotel:[],
		    gender:"female",
		    isPay:false
		});
	 avalon.scan();
 });

效果：性能

ms-repeat 基礎應用

ms-repeat:加載須要循環顯示的子元素上：默認el
ms-repeat-item-->修改成item
ms-each：做用到須要循環子元素的父元素上

界面大數據

<body ms-controller="test">
<p>數組遍歷</p>
<!-- $index:下標 
     $last最後一個元素 -->
<ul>
<li ms-repeat-item="array">{{item}}---->{{$index}}</li>
</ul><br>

<p>ms-each</p>
<ul ms-each="array">
<li>{{el}}<span ms-if="!$last">--></span></li>
</ul><br>

<!-- $key:屬性名  $val屬性值  ms-with相似ms-each-->
<p>ms-repeat對象屬性遍歷</p>
<ul>
<li ms-repeat="objects">{{$key}}-->{{$val}}</li>
</ul><br>

<p>ms-with對象屬性遍歷</p>
<ul ms-with="objects">
<li>{{$key}}-->{{$val}}</li>
</ul>
</body>

js操做邏輯

vm=avalon.define({
	$id:"test",
	array:[111,222,333],
	objects:{aaa:"1111",bbb:"2222",ccc:"3333"}
});

效果：

ms-repeat 高級應用

循環顯示數組元素臨時變量：el使用任何標籤
$index:下標 number類型
$first:第一個元素 $last:最後一個元素 -----boolean值
$remove:清除數組當前元素:function
$outer:內層元素訪問外部元素 object
$val:獲取對象的屬性值 hash對象

界面

<body ms-controller="test">
<ul ms-each="fruit">
<li>{{el}}
<span><a ms-click="$remove" href="#" style="text-decoration:none;">&nbsp;&nbsp;x</a></span>&nbsp;下標：{{$index}}
</li>
</ul>
<br><br>

<table border="1">
<tr ms-repeat="array">
  <!-- out表示上一級的元素對象：array -->
  <td ms-repeat-item="el">{{$outer.$index}}--->{{item}}</td>
</tr>
</table>

js操做邏輯

/**
 * 循環顯示數組元素臨時變量：el使用任何標籤
 * $index:下標 number
 * $first:第一個元素   $last:最後一個  -->boolean值
 * $remove:清除數組當前元素->function  $outer:內層元素訪問外部元素  object
 * $key:獲取對象的屬性名  $val:獲取對象的屬性值 hash對象
 */
avalon.define({
	$id:"test",
	fruit:["aaa","bbb","ccc"],
	array:[[111,222,333],[444,555,666],[777,888,999]]
});

效果：

ms-if-loop 循環分支判斷

循環分支判斷：ms-if的執行優先級比ms-repeat要高，所以沒法在循環內部未發判斷,須要藉助於ms-id-loop處理

案例：只顯示數組中特定的成員信息 css內容：

div{
width:120px;
height:100px;
border:1px solid #ccc;
}

界面

<body ms-controller="vm">
<button ms-repeat="array" ms-click="toggle($index)">{{$index+1}}</button>

<div ms-repeat="array" ms-if-loop="currentIndex==$index">{{el.text}}</div>
</body>

js操做邏輯

avalon.ready(function(){
   var vm=avalon.define({
	   $id:"vm",
	   currentIndex:'',
	   array:[{text:"11111"},
	          {text:"22222"},
	          {text:"33333"},
	          {text:"44444"}],
	   toggle:function(index){
		   vm.currentIndex=index;
	   }
   });
       avalon.scan();
});

效果：

ms-data 數據緩存

ms-data:爲了提升頁面的視圖渲染速度，對於部分大數據的model數據能夠經過avalon提供的數據緩存功能將經常使用的數據存放在標籤的空間裏面，當瀏覽器渲染試圖時會優先經過緩存讀取數據，以達到網頁加速的效果

界面

<body ms-controller="test">

<!-- div充當數據緩存池的角色 -->
<div ms-data-number="number"
     ms-data-number2="number2"
     ms-data-bool="bool"
     ms-data-bool2="bool2"
     ms-data-void="vv"
     ms-data-null="nn"
     ms-data-array="array"
     ms-data-date="date"
     ms-date-object="object"
     ms-data-fn="show"
     ms-click="show()"
    >點擊顯示</div>
</body>

js操做邏輯

avalon.ready(function(){
	/*avalon的數據緩存功能，綁定屬性中對象和數據是直接保存到元素節點上的
	  將avalon對象綁定到div上，會自動轉換爲data-*的格式：ms-data-number-->data-number樣式
	 而數組 函數 對象是直接綁定在div對象上,,成爲div屬性
	*/
	var vm=avalon.define({
		$id:"test",
		number:111,
		number2:NaN,
		bool:false,
		bool2:true,
		nn:null,
		vv:undefined,
		array:[1,2,3],
		date:new Date(),
		object:{name:"data"},
		show:function(){
			var elem=avalon(this); //相似jquery-->$(this)
			
			/*從div的數據緩衝池中獲取數據：
			 * HTML5通常能夠經過localSession和localStorage進行本地存儲， 
			 *localStorage注意釋放空間*/
			console.log(
			elem.data("number"),elem.data("number2"),
			elem.data("bool"),elem.data("bool2"),
			elem.data("null"),elem.data("void"),
			elem.data("fn"),this["data-array"],
			this["data-date"],this["data-object"]
			);
		}
	});
	avalon.scan();
});

效果：