zoukankan      html  css  js  c++  java
  • 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angularrivets。它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式。下面是各大家的过滤器比较:

    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的方法调用相似,力求减少学习成本。

    avalon自带以下几个过滤器

    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)
    

    例子:

    <!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>
    

    enter image description here

    如果想自定义过滤器,可以这样做:

        
    
       avalon.filters.myfilter = function(str, args, args2){//str为管道符之前计算得到的结果,默认框架会帮你传入,此方法必须返回一个值
              /* 具体逻辑 */
              return ret;
           }
    

    如果想格式化表单控件的值,请使用$watch回调。

  • 相关阅读:
    PostgreSQL 安装和使用
    动态sql
    知识储备
    java空和非空判断
    我的第一篇博客
    正式工作:PreparedStatement 参与的
    mysql part2DML(数据操作语言)
    DCL(权限 ,用户)
    DQL(数据查询语言)
    准备工作:Eclipse 导入 mysql连接java 的jar包
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/4018538.html
Copyright © 2011-2022 走看看