avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象,但它大部分属性都被重写了,从而实现"操作数据即操作视图"的效果.我们在定义vm时,一般需要定义$id,其次是其他业务数据属性,它们都是来自后端的数据表.在1.4,1.5中,还有一个叫$skipArray的数组,用于方置一些只用同步一次视图的属性名,这是为了提高性能.因为将普通属性转换能同…

avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Object"或ms-css="Array". 注意,当你用对象字面量的方式传参时,注意存在-号的键名要用""号括起来. 这个会报错.正确写法是以下两种 在avalon1.*系列,允许你在属性值中加入插值表达式,如 ms-css-width="prop&q…

avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来代劳.VM,成了一个大管家.它只一个反射体.我们对它的操作,直接影响到视图.因此俗称"操作数据即操作视图"!至于它是怎么影响视图,avalon视其版本的不同,也有不同的解法.如果抛开avalon,纵观世上所有MVVM框架,大抵有如下几种方式 函数wrapper:将原数据对象重新改造,所有属…

avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect注册一个特效. avalon.effect(name, definition) 所有注册了的特效,都可以在avalon.effects对象中找到. css3动画要求我们至少添加4个类名.这个是从angular那里学过来的.因此如何你以前的项目是基于angular,它那些CSS动画类可以原封不动地搬过…

avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优雅的定义组件使用组件.从avalon1.4的ms-widget,到avalon1.5的自定义标签.而现在的版本恰好是它们的结合体,并从web component那里借鉴了slot插入点机制及生命周期管理,从react那里抄来了render字符串模板. 在avalon1.4中,ms-widget指令的…

avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery validation. avalon内置验证规则有 规则 描述 required(true) 必须输入的字段. email(true) 必须输入正确格式的电子邮件. url(true) 必须输入正确格式的网址. date(true或正则) 必须输入正确格式的日期.默认是要求YYYY-MM-dd这样…

avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那里抄来了ms-repeat, 这是循环元素内部的. 到avalon2,这三个指令合并成一个ms-for指令 ,用法与angular更相似,但没有$index, $last, $first, $middle. 如果想得到数组元素或对象的键值,在in关键字前指定一个新变量 <div ms-for="…

本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1.×时别无二致,只要值是真,就插入,为假时,就在原位置上替换为一个注释节点做占位符. 注意1: 在avalon1.*中,存在一个叫ms-if-loop的辅助指令,这个在2.0移除了,这个直接使用filterBy过滤器就能实现相似功能. 注意2: 在avalon1.*中,ms-if的优选级是高于ms-repea…

avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" 有多少个属性就写多个ms-attr-.其中不能省略.此外,还存在ms-title, ms-alt,ms-src, ms-href, ms-selected, ms-checked等等缩略写法.但估计很少人知道,到底哪些属性可以缩写,哪些不能. avalon2从减轻用户的记忆出发,将你要操作的属性全部打包成…

数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中,这两种是严格区分的.一般来说,我们只要求填文本,不要填HTML.填HTML有点危险! 在avalon1中,存在四种数据填充的手段 {{expr}}, {{expr|html}}, ms-text, ms-html 其实第一种与第三种一样,用于输出纯文本,第二种与第四种一样,如果用户的数据是一些HTML标签,那…