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

  1. rivetsjs
  2.  
  3. <span rv-text="event.startDate | date"></span>
  4. <input rv-value="item.price | currency">
  5. <span rv-text="billing.cardNumber | mask 4 4 ********"></span>
  6.  
  7. angularjs
  8.  
  9. <b>{{ "lower cap string" | uppercase }}</b>
  10. <span>{{ {foo: "bar", baz: 23} | json }}</span>
  11. {{ 1304375948024 | date }}
  12. {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
  13. {{ expression | filter1 | filter2 | ... }}
  14.  
  15. avalon.js
  16.  
  17. {{aaa | uppercase }}
  18. {{12345| number}}
  19. <div>{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}</div>
  20. 生成于{{ 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)

  1.   'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
  2.   'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
  3.   'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
  4.   'MMMM': Month in year (January-December)
  5.   'MMM': Month in year (Jan-Dec)
  6.   'MM': Month in year, padded (01-12)
  7.   'M': Month in year (1-12)
  8.   'dd': Day in month, padded (01-31)
  9.   'd': Day in month (1-31)
  10.   'EEEE': Day in Week,(Sunday-Saturday)
  11.   'EEE': Day in Week, (Sun-Sat)
  12.   'HH': Hour in day, padded (00-23)
  13.   'H': Hour in day (0-23)
  14.   'hh': Hour in am/pm, padded (01-12)
  15.   'h': Hour in am/pm, (1-12)
  16.   'mm': Minute in hour, padded (00-59)
  17.   'm': Minute in hour (0-59)
  18.   'ss': Second in minute, padded (00-59)
  19.   's': Second in minute (0-59)
  20.   'a': am/pm marker
  21.   'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
  22.   format string can also be one of the following predefined localizable formats:
  23.  
  24.   'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
  25.   'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
  26.   'fullDate': equivalent to 'EEEE, MMMM d,y' for en_US locale (e.g. Friday, September 3, 2010)
  27.   'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010
  28.   'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
  29.   'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
  30.   'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
  31.   'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)

例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>filter</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.         <script>
  9.             avalon.define({
  10.                 $id: "test"
  11.             })
  12.         </script>
  13.     </head>
  14.     <body ms-controller="test">
  15.         <p>生成于{{new Date | date("yyyy MM dd:HH:mm:ss")}}</p>
  16.         <p>生成于{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p>
  17.         <p>生成于{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p>
  18.         <p>生成于{{ "01-01-2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
  19.         <p>生成于{{ "03 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
  20.         <p>生成于{{ "3 4,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
  21.         <p>生成于{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p>
  22.         <p>生成于{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p>
  23.         <p>值得注意的是，new Date可传的格式类型非常多，但不是所有浏览器都支持这么多，
  24.             详看<a href="http://dygraphs.com/date-formats.html">这里</a></p>
  25.     </body>
  26. </html>

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

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

如果想格式化表单控件的值，请使用$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. bzoj 3277 串 && bzoj 3473 字符串 && bzoj 2780 [Spoj]8093 Sevenk Love Oimaster——广义后缀自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3277 https://www.lydsy.com/JudgeOnline/problem.p ...

  2. Joyoi花店橱窗（原tyvj1124）

    题目:http://www.joyoi.cn/problem/tyvj-1124 两点注意!!! 1.滚动数组的初始化: 2.字典序操作! 感到很有趣!!! #include<iostream& ...

  3. 搭建openwrt_x86虚拟机环境

    1.下载源码 http://downloads.openwrt.org/snapshots/trunk/x86/openwrt-x86-generic-combined-ext4.img.gz 2.格 ...

  4. wxWidgets：处理wxEVT_PAINT

    我们仍然以继承于wxFrame的MyFrame作为例子. MyFrame.h: class MyFrame : public wxFrame { ...... private: ...... void ...

  5. BASIC-30_蓝桥杯_阶乘计算

    题目: 问题描述 输入一个正整数n,输出n!的值. 其中n!=1*2*3*…*n. 算法描述 n!可能很大,而计算机能表示的整数范围有限,需要使用高精度计算的方法.使用一个数组A来表示一个大整数a,A ...

  6. 基于jQuery.i18n.properties实现前端网站语言多版本

    我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...

  7. jquery拖动分页

    scrollpagination.js /* ** Anderson Ferminiano ** contato@andersonferminiano.com -- feel free to cont ...

  8. xshell连不上虚拟机linux的解决办法（用的默认NAT模式）

    1.找到Linux系统的ip地址 输入命令   ifconfig 2.打开本地网络连接 将VMnet1的ip地址设置为和虚拟机ip同一网段的ip 比如虚拟机Linux系统的ip为   192.168. ...

  9. OpenGL 画出雷达动态扫描效果(一)

    最终效果如下所示 Demo下载  http://files.cnblogs.com/xd-jinjian/Debug.zip 源代码下载 http://download.csdn.net/detail ...

  10. javascript的焦点管理

    HTML5也添加了辅助管理DOM焦点的功能. 元素获得焦点的方式有页面加载,用户输入和代码中调用的focus()方法. 而document.activeElement属性保存着当前获得焦点的引用. v ...