【迷你MVVM框架 avalonjs 学习教程14、事件绑定】的更多相关文章

迷你MVVM框架 avalonjs 学习教程14、事件绑定

之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了.能直接在模板上绑定是事件,这也是静态模板与动态绑定的一大区别.ms-click不是简单的onclick的别名,它在内部屏蔽了浏览器的差异,并且对许多浏览器暂时不支持的事件做了兼容处理. 总的来说,事件绑定是使用ms-on-☆绑定来实现,但avalon也提供了许多快捷方式,让用户能直接以ms-eventName调用那些常用事件,如下 animationend. blur. change. input. click. db…

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

在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆由于定义在元素节点上,是一个特性节点(Attribute),因此称为绑定属性. 双花括号称之为插值表达式,意即这里在插入ViewModel对应的属性,或通过加减乘除后得到的结果. 绑定属性与插值表达式对于MVVM是非常重要的东西,它们是实现双向绑定的重要一环,我们通过它来操作DOM.在angular…

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

avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名data-*都与knockout差不多.它总共900行. 当时的理论体现在我在注释的这一段话: JS UI Component 最终还是通过 HTML 来描述界面,当 js object 的数据发生变化或者执行某个动作时, 需要通知到对应的html,使其发生相应变化.于是js object 需要得到他…

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

大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> <html lang="en" data-framework="react"> <head> <meta charset="utf-8"> <title>React • TodoMVC</titl…

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

avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前就预言,MVVM是前端的终极解决方案.我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的.因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器. 但这么牛叉的东西,为什么现在才流行起来呢?要不是谷歌振臂高呼,这个一直缩在flex, wps…

迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项

本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速慢时将花括号暴露出来. <!DOCTYPE html> <html> <head> <title>avalon入门</title> <meta http-equiv="Content-Type" content="…

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

MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过underscope,那是一个工具集:你们可以听说过ejs,Mustache.HandlebarsJS等模板引擎,它们是用来替代字符串拼接--凡此种种,它们在我们的业务开发中只是很少的部分,带来的帮助也很有限.前端开发,贯彻始终的是如何将后端的数据显示出来,将用户的输入格式化送到后端,都离不开DOM操作,而DO…

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

avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defineProperties及VBScript,将要操作VM属性变成一种访问器属性.访问器属性是一种特殊的属性,需要我们为它指定setter.getter方法(当然,这也是框架内部生成的,只有计算属性可以做一些干预),当用户对此属性进行赋值操作时,就会调用setter方法,对它进行读取时,就会进行gett…

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

SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存大量数据的关键.本章节介绍的是avalon三柱臣之一的mmRouter(内含mmHistory). 我们先上一个示例吧. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit…

迷你MVVM框架 avalonjs 学习教程16、过滤器

avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rivetsjs <span rv-text="event.startDate | date"></span> <input rv-value="item.price | currency"> <span rv-text="b…