jQuery的许多功能都可以通过avalon的绑定属性来处理，如click方法对应ms-click，css方法对应ms-css，toggle方法对应ms-visible，它的数据缓存功能avalon也搬过来了。但不同于jQuery的是，avalon是直接将数据保存到元素节点的HTML5的data-☆属性上。在从data-☆属性还原数据时，它会简单的数据转换，再返回给你。

在ms-data绑定中，考虑到如果将对象转换为字符串再还原会丢失函数什么的，因此它们会直接保存到元素之上。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="../avalon.js"></script>

        <script>

            avalon.define({

                $id: "test",

                $skipArray: ["array", "object"],

                number: 111,

                number2: NaN,

                bool: false,

                bool2: true,

                nn: null,

                vv: void 0,

                array: [1, 2, 3],

                date: new Date,

                object: {

                    name: "这是数据"

                },

                show: function() {

                    var elem = avalon(this)

                    console.log(

                            elem.data("number"), elem.data("number2"),

                            elem.data("bool"), elem.data("bool2"),

                            elem.data("null"), elem.data("void"),

                            elem.data("fn"), this["data-array"],

                            this["data-date"], this["data-object"]

                            )

                }

            })

        </script>

    </head>

    <body ms-controller="test">

        <div ms-data-number="number"

             ms-data-number2="number2"

             ms-data-bool="bool"

             ms-data-bool2="bool2"

             ms-data-void="vv"

             ms-data-null="nn"

             ms-data-array="array"

             ms-data-date="date"

             ms-data-object="object"

             ms-data-fn="show"

             ms-click="show"

             >点我</div>

    </body>

</html>


这是一个很简单的绑定，没什么好说的，只要记住对象与数组是直接保存在元素节点上就行了。下面是它的源码：

"data": function(val, elem, data) {

    var key = "data-" + data.param

    if (val && typeof val === "object") {

        elem[key] = val

    } else {

        elem.setAttribute(key, String(val))

    }

},

迷你MVVM框架 avalonjs 学习教程7、数据缓存的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 迷你MVVM框架 avalonjs 学习教程12、数据联动

    在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.在avalon里,存在各种绑定回调与$watch回调,完全满足 ...

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

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

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

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

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

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

随机推荐

  1. javascript---关于字符串和数组的方法

    在学习javascript过程中,遇到过很多关于数组和字符串的一些操作.之前也总结了不少方法,可是一遇到自己用的时候,就忘了.不是忘了方法叫什么名,就是忘了方法的参数有什么,返回的是什么? 现在就再次 ...

  2. 【hive】时间段为五分钟的统计

    问题内容 今天遇到了一个需求,需求就是时间段为5分钟的统计.有数据的时间戳.对成交单量进行统计. 想法思路 因为数据有时间戳,可以通过from_unixtime()来获取具体的时间. 有了具体的时间, ...

  3. Chrome插件（Extensions）开发实践

    内容摘自:http://www.cnblogs.com/mfryf/p/3701801.html

  4. MVC3 之asp.net 与vb.net 互转练习

    vb.net mvc3相关教程http://www.asp.net/mvc/overview/older-versions/getting-started-with-aspnet-mvc3/vb/ad ...

  5. bzoj3862

    题解: 这一道题目和模板有不同的地方就是在于可以修改只有一条边和i相邻 于是我们还要记录与这个点相邻的点有没有改变 代码: #pragma GCC optimize(2) #include<bi ...

  6. 使用Pandas: str.replace() 进行文本清洗

    前段时间参加了Kaggle上的Mercari Price Suggestion Challenge比赛,收获良多,过些时候准备进行一些全面的总结,本篇文章先谈一个比赛中用到的小技巧. 这个比赛数据中有 ...

  7. 《转》深入理解Activity启动流程(二)–Activity启动相关类的类图

    本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 在介绍Activity的详细启动流程之前,先为大家介绍Act ...

  8. IIS经典模式与集成模式

    在IIS7.0中Web应用程序有两种配置形式:经典和集成 经典模式 经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于IIS6.0下的Web应用程序迁移到IIS7 ...

  9. 服务器大量TIME_WAIT和CLOSE_WAIT的原因及解决办法

    Linux服务器下查看网络连接的状态 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 它会显示例如下面的信息: ...

  10. 使用VS2008进行WEB负载测试

    软件测试中使用VS2008进行WEB负载测试 最近接触关于多线程的软件测试,所以对vs2005里的测试开始感兴趣,今天学习试用了一下,记下所获得的. vs 测试分“WEB测试”,“单元测试”,“负载测 ...