【avalon2学习教程04显示隐藏处理】的更多相关文章

avalon2学习教程04显示隐藏处理

今天的主角是ms-visible,它的效果类拟于jQuery的toggle,如果它后面跟着的表达式为真值时则显示它所在的元素,为假值时则隐藏.不过显示不是 display:none这么简单,众所周知,display拥有inline, inline-block, block, list-item, table, table-cell等十来个值,比如用户之前是让此LI元素表示inline-block,实现水平菜单效果,你直接display:block就会撑破布局.因此元素之前是用什么样式显示,需要保…

avalon2学习教程12数据验证

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

avalon2学习教程08插入移除操作

本节介绍的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学习教程06样式操作

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

avalon2学习教程 03数据填充

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

avalon2学习教程01

经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能,此外随着react的红红火火,对它的研究,也集成到此框架中. 我们先来一个简单的例子 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset=…

avalon2学习教程15指令总结

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

avalon2学习教程14动画使用

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

avalon2学习教程13组件使用

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

avalon2学习教程11数据联动

在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大部分的指令是从vm单向拍到页面,而双向绑定,则通过监听元素的value值变化,反向同步到vm中.如果没有这种机制,则需要引入额外的机制(flux云云)来处理此事. 在avalon中,双向绑定是由双工指设,ms-duplex实现的.这个指令在1.0中已经不断增强,到2.0,它的服务对象已经不局限于表单…