【MVVM】- Avalon 過濾器

ms-controlle做用：當頁面事先加載而頁面並未徹底渲染完成時自動隱藏目標顯示域，待數據徹底顯示時avalon會自動取消樣式，達到遮擋初始靜態頁面的顯示效果

css樣式

.ms-controller{ 
visibility:hidden;
}

界面

<div ms-controller="filter">
<span>{{aaa|html}}</span><br>
<span>{{bbb|uppercase}}</span><br>
<span>{{ccc|lowercase}}</span><br>

<!-- 表示從頭開始截取5個字符，位數使用後面的字符串填充 -->
<span>{{ddd|truncate(5,'00')}}</span><br>
<span>{{eee|camelize}}</span><br>

<!-- 貨幣處理 -->
<span>{{fff|currency('$')}}</span><br>

<!-- 2：表示兩位小數 
     .:表示小數點的形式
     ,:表示千分位的分隔符
-->
<span>{{ggg|number(2)}}</span><br>
<span>{{ggg|number(2,".")}}</span><br>
<span>{{ggg|number(2,".",",")}}</span><br><br>

<!-- 時間過濾器 -->
<span>{{new Date|date("yyyy MM dd HH:mm:ss a")}}</span><br>
<span>{{"2011-07-08"|date("EEE MMM dd yyyy")}}</span><br>
<!-- 時間戳轉換 -->
<span>{{"1373021259229"|date("yyyy年MM月dd日")}}</span><br>
<span>{{"1373021259229"|date("yyyy-MM-dd HH:mm:ss a")}}</span><br><br>

<span>USD:{{"USD"|parseSymbol}}</span>
</div>

js操做邏輯

avalon.filters.parseSymbol=function(str){
	return{
		'元':'元',
		'USD':'美圓',
		'HKD':'港元'
	}[str];
}

avalon.ready(function(){
	//avalon過濾器能夠嵌套，過濾器能夠自定義:str表示須要過濾的字符
	//功能將字符串轉換爲相應的名字

	
	avalon.define({
		$id:"filter",
		aaa:"<span>hello avalon!</span>",
	    bbb:"字母大寫化：hello avalon!",
	    ccc:"字母小寫化：HELLO AVALON!",
	    ddd:"字符串截斷處理",
	    eee:"駝峯處理：abc-def-hig",
	    fff:"2255",
	    ggg:"546345.541343",
	    
	});
	avalon.scan();
});

效果：