1. 程式人生 > >【MVVM】- Avalon 過濾器

【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();
});

效果:

相關推薦

MVVM- Avalon 過濾器

ms-controlle作用:當頁面事先載入而頁面並未完全渲染完成時自動隱藏目標顯

MVVM- AngularJS 過濾器用法

過濾器作用:對model的資料進行加工,按照相應的格式進行顯示 AngularJS

MVVM- Avalon 事件繫結

avalon事件繫結 介面 <body ms-controller=&quo

MVVM- Avalon 屬性監控、解除監控、子孫元素監控、統一屬性監控

Avalon 屬性監控 $watch:屬性值改變就會改變 監聽當前的vm第1層

MVVM- Avalon驗證器duplexHooks

avalon驗證器: 主要用來限定某些元素的格式輸入 介面 <!-- ms-

MVVM- Avalon 陣列操作

avalon 物件、物件陣列、陣列基本操作 介面 <body ms-cont

ZuulZuul過濾器參考資料

資料 path ice TP ipc zuul 過濾器 PC ati #https://blog.csdn.net/chenqipc/article/details/53322830#https://github.com/spring-cloud/spring-cloud-

Filter利用過濾器Filter解決post傳遞的編碼問題與利用EL表示式簡化引數傳遞

post傳遞的編碼問題,解決的方式有兩種,一種是修改Tomcat的配置檔案,這種方式是我反對的,因為你並不能保證自己的工程在任意一個Tomcat都能跑,當然如果以後出現什麼情況,處理修改Tomcat配置檔案,沒有別的的話,那麼才修改也不遲,另一種是在頁面取值之前使用: r

JavaFilter過濾器中,在chain.doFilter(request,response)後若有重定向或轉發語句

在chain.doFilter(request,response)後若有重定向或轉發語句,執行順序是: 1.所要訪問的資源不是轉發的目標資源: chain.doFilter(request,

WPFMVVM把滑鼠事件寫到Controller層

要使用Mouse Event,最快捷的方法便是前臺控制元件直接繫結事件,然後再後臺程式碼中實現。 在MVVM中,View層的後臺程式碼無法呼叫Contrller層的函式。(反過來可以Controller –> ViewModel –> View)

MVVM- AngularJS $scope 用法

Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控

MVVM- AngularJS 依賴注入

依賴注入(Dependency Injection):,一個或更多的依賴(或服務)

MVVM- AngularJS 原生API

ANgularJS 原生函式 angular.lowercase() 轉換

MVVM- AngularJS 服務應用

AngularJS 服務基本用法 AngularJS 中,服務是一個函式或物件,可

MVVM- AngularJS ng-repeat 指令

外觀介面 <body ng-app=""> <

MVVM- AngularJS 下拉框操作

AngularJS 下拉框基礎應用 外觀介面 <div ng-app=&qu

MVVM- AngularJS基礎學習

Angular JS AngularJS 基礎入門案例 外觀頁面 <!--

ServletJava Servet Filter 過濾器

退出方法 efi rlogin file submit ati 姓名 ner lan Filter的設計思想Filter是一種AOP的設計思想 : 面向切面下面這是一個使用filter的登錄案例:我們通過一張圖片理解理解filer面向切面下面是項目的結構:下面是jsp文件:

WPFMVVM模式的3種command

src handler 因此 初始化 dex ram view ssi 不同 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因為MVVM模式適合於WPF和SL,所以這3種模式中也有一些小差異,比如Relay

009-elasticsearch示例數據導入、URI查詢方式簡介、Query DSL簡介、查詢簡述_source、match、must、should等過濾器、聚合

ase emp -h 集合 shard ken 結果 employ 5.1 一、簡單數據 客戶銀行賬戶信息,json { "account_number": 0, "balance": 16623, "firstname": "Brad