【迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信】的更多相关文章

迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么.我们先从$watch方法说起,它能监听当前的VM第一层的监控属性 与 计算属性,如果某属性是一个对象,想监控其子孙属性,就需要定位到此对象上使用$watch回调了.$watch回调会默认传入先后两个属性值. <!DOCTYPE html> <html> <head> &l…

迷你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 学习教程20、路由系统

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

迷你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 学习教程2、模块化、ViewModel、作用域

一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery时代,奉行的是"无侵入式javascript",页面虽然是拆成一块块,但最后是通过PHP等后端模板合并起来,并且把第一屏的数据直接灌进去,接着是无尽的选择某些元素进行处理,选择某些元素进行处理.javascript里面是满屏的CSS表达式,如果不一一对着HTML页面,这是无法阅读的.换言之…

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

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

迷你MVVM框架 avalonjs 学习教程21、双向绑定链

avalon的双向绑定机制,是通过一条依赖链实现.此依赖链最底层是监控属性.监控数组,中层是计算属性.监控函数,再上点是求值函数,最上层是视图刷新函数. 所谓计算属性,监控属性,监控函数属性,我们改变它们的值,它们会引发视图变化:而监控数组,是我们调用它的一些方法,也会引发视图变化. var vm = avalon.define({ a: "这是监控属性", $b: "这是非监控属性", $skipArray: ["c", "d&quo…

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

在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.在avalon里,存在各种绑定回调与$watch回调,完全满足你的需求. 下面是avalon所有绑定回调. data-duplex-changed,用于ms-duplex绑定,值改变后触发: 参数:当前元素的值 data-include-loaded,用于ms-include-src绑定,模板加载后触发,可以在这里修改模板 参数: tmpl,vmodel1,…

迷你MVVM框架 avalonjs 学习教程8、属性操作

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型.节点引用的情况.当前jQuery处理它们就是搞了N个钩子对象,才摆平它们.avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class. ms-hover. ms-active处理,这些其他章节介绍:表单元素的value属性之前也说过,…