<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. Spark SQL 编程API入门系列之Spark SQL的作用与使用方式

    不多说,直接上干货! Spark程序中使用SparkSQL 轻松读取数据并使用SQL 查询,同时还能把这一过程和普通的Python/Java/Scala 程序代码结合在一起. CLI---Spark ...

  2. 【转】C# ABP WebApi与Swagger UI的集成

    以前在做WebAPI调用测试时,一直在使用Fiddler测试工具了,而且这个用起来比较繁琐,需要各种配置,并且不直观,还有一点是还得弄明白URL地址和要传递的参数,然后才能调用.  最近新入职,公司里 ...

  3. Android截图<包括Alertdiaog>

    1.使用的系统内部的截屏方法…… 2. public class MainActivity extends AppCompatActivity { private static final Strin ...

  4. Linux apache tomcat

    [root@node1 ~]# mv jdk-7u79-linux-x64.tar.gz /usr/local/[root@node1 ~]# cd /usr/local/[root@node1 lo ...

  5. 小数据量csv文件数据导入数据库(思路)

    大致写写思路,因为sqlserver提供了可以直接导入的图形界面. 1.private static string GetConnectionString(string folderPath)  // ...

  6. 记一次html页面传值给另一个html并解码

    前言 由于最近写项目用到layui中的table.render,好像是直接由当前html直接与后台controller取数据,由一方(后台)遍历列表给html,而如果当前html需要传值给这个后台co ...

  7. 使用json_decode无法解析json

    在接入合作方接口时,遇到一个json无法解析出来代码如下: <?php $res='{"resultcode":007,"resMsg":"!& ...

  8. elementUI 上传.csv文件不成功 导入功能

    前言:element上传excel文件   导入功能 目标:点击导入,将excel表格的数据填充到表格. <el-upload class="upload-demo" :ac ...

  9. tyvj1864 [Poetize I]守卫者的挑战

    期望dp 不考虑打的顺序,只要最后能把地图都装下就行了,因此把概率和容量装进一个结构体里面,把地图放后面. 记一个状态f[i][j][k]表示前i个比赛,赢了j场,容量k的期望,转移即可. #incl ...

  10. URL中一些特殊符号的替代符

    下表中列出了一些URL特殊符号及编码 十六进制值 1.+ URL 中+号表示空格 %2B 2.空格 URL中的空格可以用+号或者编码 %20 3./ 分隔目录和子目录 %2F 4.? 分隔实际的 UR ...