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

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>

如果想自定义过滤器，可以这样做：


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

          /* 具体逻辑 */

          return ret;

       }

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

迷你MVVM框架 avalonjs 学习教程16、过滤器的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  2. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  3. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  4. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  5. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  6. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  7. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  8. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

  9. 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

    avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...

随机推荐

  1. centos 修改host

    centos 修改host vi /etc/hosts添加一行127.0.0.1 test.com /etc/rc.d/init.d/network restart

  2. tyvj1172自然数拆分

    题目:http://www.joyoi.cn/problem/tyvj-1172 非常水的完全背包.物品就是1~n这n个数. 第6行有橙色的警告:this decimal constant is un ...

  3. Flyway 简单入门教程

    原文地址:Flyway 简单入门教程 博客地址:http://www.extlight.com 一.前言 Flyway 是一款开源的数据库版本管理工具,它更倾向于规约优于配置的方式.Flyway 可以 ...

  4. jmeter --自动化badboy脚本开发技术

    jmeter --自动化badboy脚本开发技术 一般人用badboy都是使用它的录制功能,其它badboy还是一款自动化的工具,它可以实现检查点.参数化.迭代.并发.报告.断点等功能.本文就这些功能 ...

  5. c#数据类型 与sql的对应关系 以及 取值范围

    Short Name .NET Class Type Width Range (bits) SQL Datatype (Closest Match) Constraint to use (if nee ...

  6. ros建立ospf邻居的条件

    Two routers do not become neighbors unless the following conditions are met. Two way communication b ...

  7. FDD vs TDD

    双工方式 FDD vs TDD  频分双工(FDD) 收发信各占用一个频率. 优点是收.发信号同时进行,时延小,技术成熟,缺点是设备成本高.  时分双工(TDD) 收发信使用同一个频率,但使用不同 ...

  8. Dividing Infinity - Distributed Partitioning Schemes

    This is the second post in a series discussing the architecture and implementation of massively para ...

  9. php 流程控制switch实例

    switch允许对一个标量(表达式)的多个可能结果做选择. 语法: switch (expr) { case result1: statement1 break; case result2: stat ...

  10. 让“懒惰” Linux 运维工程师事半功倍的 10 个关键技巧！

    好的Linux运维工程师区分在效率上.如果一位高效的Linux运维工程师能在 10 分钟内完成一件他人需要 2 个小时才能完成的任务,那么他应该受到奖励(得到更多报酬),因为他为公司节约了时间,而时间 ...