avalon的使用与总结
avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据,它就自然而然地神奇地同步到视图。
作用域绑定
ms-controller:
<div ms-controller="AAA"></div>:对应avalon.define({$id=AAA});要加上avalon.scan();才能显示.
ms-controller:可向上一级的html寻找
ms-important:不可向上一级的html寻找
ms-skip:不显示指令
{{??}}:插值表达式,可以显示avalon的内容
但,也有例外,如下:
avalon.congig({
interpolate:["[[","]]"]
});//用[[]]代替了{{}}
ms-text,ms-html:
<div ms-text="content">content在avalon.define函数中定义的</div>
<div ms-html="content">把字符串转为为html模式例如<b>??</b>会自动地转换为加粗</div>
ms-duplex="prop":双向绑定,当元素为text,password,textarea时,要求prop为一个字符串,当我们改变它的内容时,avalon就会将此元素的value赋给prop
当元素为radio时,要求prop为一个布尔值,当我们改动它的内容时,avalon就会将此元素的check值(布尔)赋给prop.
当元素为checkbox时,要求prop为一个数组,当我们改变它的内容时,avalon就会将此元素的value值push进prop
当元素为select时,要求prop为一个字符串或数组(视multiple的值),当我们选中它的某一个项时,avalon就会将此option元素的value值或text值(没有value时)push进prop
ms-duplex-text="prop",只能用于模拟text控件的行为,要求prop为一个字符串,当我们选中某一个radio时,avalon就会将此元素的value值赋给prop用于实现多选一
ms-duplex-boolean="prop",只能用于radio,要求prop为一个布尔,并且元素的value为ture或flase,当我们选中某一个radio时,avalon就会将此元素的value转换为布尔,赋给对应的prop.
ms-date-duplex-observe="flase",我们可以在元素节点上定义data-duplex-observe="flase"来禁止双向同步
ms-visible,如果它后面跟着的表达式是真的则显示,假的则隐藏
ms-if,如果它后面跟着的表达式为真的则存在,假的则移除、在使用ms-repeat时,如需使用ms-if,则要用ms-if-loop,因为ms-if的等级在ms-repeat之前。
属性操作:
数据缓存:绑定属性ms-data-*:avalon是数据缓存功能与jQuery的data()类似,但不同于jQuery的是:avalon是直接将数据保存到元素节点的data-*属性上。在从data-*属性还原数据时,它会做简单的数据转换,再返回。在ms-data绑定属性中,对象与数组是直接保存在元素节点上的。
属性绑定:
布尔属性绑定:ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked,如果后面所跟的值为ture,则显示该属性。例如ms-attr-disabled="ture";
DOM属性:disabled 属性可设置或返回是否禁用单选按钮。
readonly 属性规定输入字段为只读。
字符串属性绑定:ms-attr-id,ms-attr-name,ms-attr-title,ms-href,ms-src,ms-attr-data-url(自定义),后面所跟的是插值表达式,例如,ms-attr-id="{{id}}"
类名属性:ms-class,见图片类名属性。ms-active,ms-hover:分别是用来模拟:active,:hover效果,用法与ms-class一样
ms-active:只在点击的那一瞬间有效果
ms-hover:只在掠过时有效果,失去焦点或离开目标元素就会移除刚才添加的类名
拦截器:
ms-duplex监听的是value.
样式操作:ms-css-width,ms-css-height,ms-css-background-color,ms-css-color,ms-css-font-size;
事件操作:ms-click($remove),单击后直接清除,ms-mouseenter,ms-mouseleave,ms-on-input
循环绑定:ms-repeat,ms-each,后者在副元素先绑定
数组循环:ms-repeat,ms-each
对象循环:ms-repeat,ms-with
临时变量:$first,$last.$index,$outer
循环显示数组的临时变量:
循环显示对象的临时变量:
更新数据:
回调函数绑定:data-repeat-rendered,data-with-rendered,data-with-sorted,data-repeat-rendered
监控数组的方法与普通数组没什么不同,它只是被重写了某一部分方法,如 pop, shift, unshift, push, splice,sort, revert。其次添加了四个移除方法,remove, removeAt, removeAll, clear, 及ensure,pushArray, size,set方法。
- pushArray(el), 要求传入一数组,然后将它里面的元素全部到当前数组的末端。
- remove(el), 要求传入一元素,通过全等于比较进行移除。
- removeAt(index), 要求传入一数字,会移除对应位置的元素。
- removeAll(arrayOrFunction), 有三种用法,如果是一个函数,则过滤比较后得到真值的元素, 如果是一数组,则将此数组中与原数组相等于的元素全部移除;如果没有任何参数,则全部清空。
- clear(),相当于removeAll()的第三种方法,清空数组的所有元素。由于需要同步视图的缘故,不能通过vm.array.length = 0的方法来清空元素。
- ensure(el),只有当数组不存在此元素时,只添加此元素。
- size(),返回数组的长度。由于length属性是固有属性,无法hack,也就无法实现双向绑定,因此请用它来代替length。
- set(index, el),用于更新某一索引位置中的元素,因为简单数组元素的数组,是不会转换它的元素。
avalon的使用与总结的更多相关文章
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 迷你MVVM框架avalon在兼容旧式IE做的努力
很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...
- 前端展望:取avalon,弃angular
打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧: 目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...
- 轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...
- 轻量级前端MVVM框架avalon - 执行流程1
基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...
- 轻量级前端MVVM框架avalon - 执行流程2
接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...
- 轻量级前端MVVM框架avalon - 整体架构
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...
- 轻量级前端MVVM框架avalon - ViewModel
废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...
- 轻量级前端MVVM框架avalon - 模型转换
接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...
随机推荐
- cmd 命令阻塞继续执行下面的命令的办法
例如在dos下查询硬盘序列号: 首先输入:diskpart-->select disk 0--> detail disk. 如果要在java下面直接查询可以写成一个bat文件写成下面形式: ...
- HTML <img> 标签的 alt 属性
定义和用法 alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本. 假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息: 网速太慢 src 属性中的错误 浏览器禁用图像 ...
- Android系统root破解原理分析
http://dengzhangtao.iteye.com/blog/1543494 root破解过程的终极目标是替换掉系统中的su程序.但是要想替换掉系统中su程序本身就是需要root权限的,怎样在 ...
- Netty学习第五节实例进一步学习
概念理解: Netty是基于NIO的框架 传统IO与NIO的区别: 1.传统IO会造成阻塞点: 2.单一的客户端处理消息 解决阻塞问题:建立线程池,达到收到一个消息就建立一个 ...
- 文件读取ndarry 等价于DataFrame的操作
LD=loadDatas() userMat=LD.makeRatingMatWithoutUserID() print(type(userMat)) userRatingMat=pd.DataFra ...
- 微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
- struts2 一些注解
实现的JSP页面位置 web-root/jsp/user/add.jsp /update.jsp // /* @Namespace("/t") @AllowedMethods(va ...
- Windows 下安装ReText
打算使用MarkDown了,群友推荐使用ReText,基于Python的,同时依赖了Python的几个包,通过easystall可以方便地安装,同时制作了快捷启动方式,网上找了篇文章以备忘. Inst ...
- 【图论】信手拈来的Prim,Kruskal和Dijkstra
关于三个简单的图论算法 prim,dijkstra和kruskal三个图论的算法,初学者容易将他们搞混,所以放在一起了. prim和kruskal是最小生成树(MST)的算法,dijkstra是单源最 ...
- web.xml中Filter,Listener,Servlet的区别
一.Servlet Servlet是基本的服务端程序,他来自接口Servlet,接口中有方法service.而Servlet的一个重要实现类,则是tomcat服务器的核心,那就是HttpServlet ...