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的使用与总结的更多相关文章

  1. MVVM大比拼之avalon.js源码精析

    简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...

  2. 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 的目的是 ...

  3. 迷你MVVM框架avalon在兼容旧式IE做的努力

    很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...

  4. 前端展望:取avalon,弃angular

    打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧:   目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...

  5. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  6. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  7. 轻量级前端MVVM框架avalon - 执行流程2

    接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...

  8. 轻量级前端MVVM框架avalon - 整体架构

    官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...

  9. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  10. 轻量级前端MVVM框架avalon - 模型转换

    接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...

随机推荐

  1. org.json

    org.json很经典.能解析json和序列化List.Map为json,但是不能自动填充bean.不依赖其它架包. 直接上代码: import java.util.ArrayList; import ...

  2. linux下集成开发环境之ECLIPSE--在线调试、编译程序

    裸机开发流程 1.编写裸机程序:2.调试裸机程序:3.生成2进制映象(编译.链接.格式转换):4.烧写/运行2进制映象. 注意:我们自己开发的程序等等需要下载到开发板的Nandflash(类似于硬盘功 ...

  3. Spring+SpringMVC+mybatis+Quartz整合

    Quartz与SpringMVC的整合 简介 Quartz是一个完全由java编写的开源作业调度框架,为在Java应用程序中进行作业调度提供了简单却强大的机制.Quartz允许开发人员根据时间间隔来调 ...

  4. 2018.08.20 loj#116. 有源汇有上下界最大流(模板)

    传送门 貌似就是转成无源汇,然后两遍最大流搞定? 其实第二遍跑最大流是自动加上了第一次的答案. 代码: #include<bits/stdc++.h> #define N 100005 # ...

  5. hdu-1163(九余数定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1163 思路: 九余数定理:一个数对九取余的结果叫做九余数, 一个数的各个位数相加的得到的小于10的数也 ...

  6. DevExpress gridcontrol Master-Detail绑定到对象类型

    数据库:C_ProductPlan ,C_ProductPlanItemDTO定义:(实现每个计划条目-Master,对应多个ProcessInfo-Detail) [DataContract] [S ...

  7. Ansible 笔记 (3) - 编写 playbook

    playbook 相当于多个命令的编排组合然后一起运行,类似写脚本.在学习 playbook 之前需要了解 yaml 格式. 编写playbook的步骤: 定义主机与用户 编写任务列表 执行 play ...

  8. 20155320 2016-2017-2 《Java程序设计》第六周学习总结

    20155320 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 输入输出 InputStream的read()方法每次都会尝试读入byte数组长度的数据,并 ...

  9. C++互斥器:Semaphores

    类似于Mutex,但信号量Semaphores不仅仅是锁和解锁那么简单,更高级的是,可以被锁住最多n次. 其中这个n是信号量被产生时指定的n.该值常常被用来代表“可以锁定住一份资源”的线程个数. 可以 ...

  10. Sql Server 2008 压缩数据库日志文件

    第一步:将数据库设置为简单模式 选中数据库点右键->属性: 第二步:收缩数日志文件 1, 2,   第三步:将恢复模式改回为完整模式     如果你觉得用UI界面麻烦,那你就用SQL语句吧   ...