迷你MVVM框架 avalonjs 學習教程1六、過濾器

時間 2019-11-13

標籤迷你 mvvm 框架 avalonjs 學習教程過濾器简体版

原文原文鏈接

avalon的過濾器是參考自angular與rivets。它也被稱作管道文本過濾器，它的處理對象只能是文本（字符串），它只能用在文本綁定中，而且只能是雙花括號形式。下面是各你們的過濾器比較：javascript

rivetsjs

<span rv-text="event.startDate | date"></span>
<input rv-value="item.price | currency">
<span rv-text="billing.cardNumber | mask 4 4 ********"></span>

angularjs

<b>{{ "lower cap string" | uppercase }}</b>
<span>{{ {foo: "bar", baz: 23} | json }}</span>
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
{{ expression | filter1 | filter2 | ... }}

avalon.js

{{aaa | uppercase }}
{{12345| number}}
<div>{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}</div>
生成於{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}

avalon的傳參是經過小括號實現，多個參數用逗號隔開，這與JS的方法調用類似，力求減小學習成本。html

avalon自帶如下幾個過濾器java

html

沒有傳參，用於將文本綁定轉換爲HTML綁定

uppercase

大寫化

lowercase

小寫化

truncate

對長字符串進行截短，truncate(number, truncation), number默認爲30，truncation爲「…」

camelize

駝峯化處理

escape

對相似於HTML格式的字符串進行轉義，把尖括號轉換爲> <

currency

對數字添加貨幣符號，以及千位符， currency(symbol)

number

對數字進行各類格式化，這與與PHP的number_format徹底兼容，它有三個參數。decimals 可選，規定多少個小數位。dec_point可選，規定用做小數點的字符串（默認爲 . ）。 thousands_sep可選，規定用做千位分隔符的字符串（默認爲 , ），若是設置了該參數，那麼全部其餘參數都是必需的。

date

對日期進行格式化，date(formats)

  'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
  'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
  'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
  'MMMM': Month in year (January-December)
  'MMM': Month in year (Jan-Dec)
  'MM': Month in year, padded (01-12)
  'M': Month in year (1-12)
  'dd': Day in month, padded (01-31)
  'd': Day in month (1-31)
  'EEEE': Day in Week,(Sunday-Saturday)
  'EEE': Day in Week, (Sun-Sat)
  'HH': Hour in day, padded (00-23)
  'H': Hour in day (0-23)
  'hh': Hour in am/pm, padded (01-12)
  'h': Hour in am/pm, (1-12)
  'mm': Minute in hour, padded (00-59)
  'm': Minute in hour (0-59)
  'ss': Second in minute, padded (00-59)
  's': Second in minute (0-59)
  'a': am/pm marker
  'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
  format string can also be one of the following predefined localizable formats:

  'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
  'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
  'fullDate': equivalent to 'EEEE, MMMM d,y' for en_US locale (e.g. Friday, September 3, 2010)
  'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010
  'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
  'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
  'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
  'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)

例子：git

<!DOCTYPE html>
<html>
    <head>
        <title>filter</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            avalon.define({
                $id: "test"
            })
        </script>
    </head>
    <body ms-controller="test">
        <p>生成於{{new Date | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "01-01-2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "03 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "3 4,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>生成於{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p>
        <p>值得注意的是，new Date可傳的格式類型很是多，但不是全部瀏覽器都支持這麼多，
            詳看<a href="http://dygraphs.com/date-formats.html">這裏</a></p>
    </body>
</html>

若是想自定義過濾器，能夠這樣作：angularjs

    

   avalon.filters.myfilter = function(str, args, args2){//str爲管道符以前計算獲得的結果，默認框架會幫你傳入，此方法必須返回一個值
          /* 具體邏輯 */
          return ret;
       }

若是想格式化表單控件的值，請使用$watch回調。express