<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .ms-controller {
            visibility: hidden;
        }
    </style>
    <script src="Content/js/avalon.js"></script>
</head>
<body>
    <div ms-controller="filter">

<%--输出html格式--%>
        <span>{{aaa|html}}</span><br />
        <br />

<%--字母大写化--%>
        <span>{{bbb|uppercase}}</span><br />
        <br />

<%--字母小写化--%>
        <span>{{ccc|lowercase}}</span><br />
        <br />

<%--从头开始截取5个字符，位数使用后面的字符串填充--%>
        <span>{{ddd|truncate(5,'00')}}</span><br />
        <br />

<%--驼峰处理--%>
        <span>{{eee|camelize}}</span><br />
        <br />

<%--货币处理--%>
        <span>{{fff|currency('$')}}</span><br />
        <br />

<%--2:表示两位小数
       .:表示小数点的形式
       ,:表示千分位的分隔符--%>
        <span>{{ggg|number(2)}}</span><br />
        <br />
        <span>{{ggg|number(2,".")}}</span><br />
        <br />
        <span>{{ggg|number(2,".",",")}}</span><br />
        <br />

<%--时间过滤器--%>
        <span>{{new Date|date("yyyy MM dd HH:mm:ss  a")}}</span><br />
        <br />
        <span>{{"2011-07-08"|date("EEE MM dd yyyy")}}</span><br />
        <br />

<%--时间戳转换--%>
        <span>{{"1373021259229"|date("yyyy年MM月dd日")}}</span><br />
        <br />
        <span>{{"1373021259229"|date("yyyy-MM-dd HH:mm:ss a")}}</span><br />
        <br />
        <span>{{"1373021259229"|date("yyyy-MM-dd mm:ss")}}</span><br />
        <br />

<span>USD:{{"USD"|parseSymbol}}</span><br />
    </div>
</body>
<script type="text/javascript">
    avalon.filters.parseSymbol = function (str) {
        return {
            '元': '元',
            'USD': '美元',
            'HKD': '港元'
        }[str];
    }

var vm = 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",

});
</script>

</html>

avalon过滤的更多相关文章

  1. avalon学习笔记一 列表及条件过滤

    好长时间都没有更新博客了,不是因为没有学习新的东西,而是到了新的单位每天玩命加班实在是太累了!经过一年的努力吧,终于可以轻松一下了.废话少说,直接干货吧! 由于是学习阶段,就直接拿了公司的二级页面做了 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. 轻量级前端MVVM框架avalon - 模型转换

    接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...

  4. 轻量级前端MVVM框架avalon - 控制器

    引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 ...

  5. 前端MVVM框架avalon揭秘 - HTML编译器

    MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明 ...

  6. 使用mvvm框架avalon开发公司内部运营管理系统的一些心得

    接触avalon差不多有一年时间了,当时是看前端大牛司徒正美的博客才了解到还有这么一个高大上的玩意,然后就加入了avalon的讨论群.从群里零零散散的了解了avalon的一些特性,感觉很强大,感觉思想 ...

  7. 运行avalon.define()发生的事情

      avalon.define = function(id, factory) { var $id = id.$id || id if (!$id) { log("warning: vm必须 ...

  8. 前端MVVM框架avalon - 模型转换1

    轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...

  9. avalon的使用与总结

    avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理.我们只要操作VM的数据,它就自然 ...

随机推荐

  1. ROS-Gazebo文件标签解读

    前言:Gazebo是一个三维机器人仿真器,它是独立的软件,支持ROS. 标签 功能 <gazebo> 设置Gazebo仿真的参数 <mu1>, <mu2> 设置摩擦 ...

  2. 如何版本化你的API？--转

    原文地址:http://www.infoq.com/cn/news/2017/09/How-versioning-API 如何版本化API需要考虑各种实际业务场景,但是一个完备的API应该是: 和客户 ...

  3. $(function(){});里的方法无效问题

    $(function(){})已经是一个匿名函数了,在里面定义的函数已经是私有了,不能全局访问.把函数定义在全局,也就是function外面,这样外部才能调用.

  4. Oracle学习系类篇（二）

    1.Oracle对表的增删改 1.1添加列 1.2修改列 1.3 删除列 1.4 修改表名称 1.5 修改列名称 1.6 删除主键约束 1.7 添加主键约束 1.8 添加外键约束

  5. Tarjan 求图点强联通，桥的应用

    在图中求双联通和强联通分量是我们解决非树结构的图连通问题的利器 通过求求图的双联通和强联通分量能把图转化成DAG进行求解: 行走 Description 给出一个有向图,你可以选择从任意点出发走到任意 ...

  6. vue中使用Ueditor编辑器 -- 1

    一.   下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为:http://ueditor.baidu.com/website/download.html ...

  7. 错误：com.android.builder.packaging.DuplicateFileException: Duplicate files copied

    File2: C:\Users\guoxw\.gradle\caches\modules-2\files-2.1\org.jsoup\jsoup\1.10.3\b842f960942503cf1abb ...

  8. 像素点的Hessian矩阵

    最近开始学习图像处理相关知识,碰到对像素点求黑塞矩阵查了资料才搞懂. 给定一个图像f(x,y)上的一点(x,y).其黑塞矩阵如下: 因为导数的公式是f'(x)=(f(x+dx)-f(x))/dx在数字 ...

  9. java容器基础

    总结一下学过的java容器知识. 一.java容器框架 由于之前学习的java容器类比较混乱,先简单的整理一下java集合框架. 首先,像这种图,网上到处都是,因为这个也算比较准确吧,我也懒得自己画了 ...

  10. java web 初尝遇到的坑

    1. 配置 tomcat 7 + Dynamic web model version 3 发现写 web.xml 导致 tomcat 不能启动. 解决办法:tomcat 7 之后有两种配置 servl ...