JavaScript 中 avalon绑定属性总结


Posted in Javascript onOctober 19, 2016

avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据,它就自然而然地神奇地同步到视图。

$model(所有非$属性),$event(事件对象)

1、作用域圈定

ms-controller:按着就近原则自下而上扫描DOM树

ms-important:仅扫描本节点及之下作为扫描区

ms-skip:使绑定失效

2、ms-duplex双向绑定属性:除了绑定(VM同步数据到V)数据到DOM节点中,还会偷偷在节点上绑定一个监听事件,当节点数据发生变化时,及时把V中的数据同步到VM中

(1)text,password,textarea要求绑定值为一个字符串(ms-duplex-text)

(2)radio:绑定为boolean(ms-duplex-boolean)

(3)checkbox:绑定为数组(ms-duplex-string)

(4)select:绑定为字符串或者数组(ms-duplex-string)

后边是ms-duplex2.0绑定属性

3、ms-visible:类似toggle,表达式为true显示,通过把display设置为block或者none显示或隐藏

4、插入移除处理ms-if:添加节点元素显示元素,设置<!--ms-if-->注释隐藏节点(删除节点)

5、数据缓存ms-data-*,保存对象或者数组使用ms-data(绑定在DOM节点对象上而不是作为属性),保存在节点上,显示时处理返回,绑定为data-*属性

6、属性操作ms-class(class),ms-duplex(value),ms-attr,ms-href,ms-src

boolean属性:ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked

字符串固有属性:ms-attr-id,ms-attr-name,ms-attr-title,ms-src,ms-href

自定义属性:ms-attr-data-url,ms-attr-data-id

ms-class: ms-class='active' ms-class='active:isOk'
ms-active,ms-hover

7、ms-duplex2.0

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

辅助data-duplex-focus,data-duplex-changed,data-duplex-event

8、样式操作:ms-css(内联),ms-class(外部引入)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9、事件绑定:ms-on-eventName,ms-eventName

ms-mouseenter,ms-mouseleave(仅作用于被选元素),ms-input(ms-on-input),多事件绑定顺序与自然数无关,与事件顺序有关

10、循环操作

ms-each-遍历临时变量(在父级元素上绑定)

ms-repeat-遍历临时变量(在子元素上绑定)

ms-with-遍历临时变量(在父级元素上绑定)

数组:el默认临时变量,$index当前元素的索引,$first是否为第一个元素boolean,$last,$remove返回一个function删除当前元素,$outer内层循环外层循环变量

哈希(对象):$key键名,$val键值,$outer ($outer.$index)

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

修改对象的键值:

修改对象的键值对:

修改数组的值:数组对象.set(下标,值)

修改数组中对象值:数组对象[下标].键名 = 键值;

遍历回调函数(属性)

data-each-rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

循环时使用size计算数据长度,而不是length,使用ms-if-loop而不是ms-if,因为ms-if优先于ms-repeat执行

11、模版引用

12、属性监听

13、模块通信

下面介绍下avalon作用域圈定方法

在使用avalonJS做前端开发时,需要圈定数据绑定作用域,存在三种方式:

(1)ms-controller:此绑定属性会按着就近原则来圈定作用域,先从本标签开始网上查找

(2)ms-important:此绑定属性仅查找本标签,倘若查找不到vm绑定数据则原样输出在页面上

(3)ms-skip:此绑定属性的作用是使数据绑定失效,即插值表达式原样输出,不管查找到作用域内绑定数据与否

以上所述是小编给大家介绍的JavaScript 中 avalon绑定属性总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
Javascript中暂停功能的实现代码
Mar 04 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
Angular2  NgModule 模块详解
Oct 19 #Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 #Javascript
jQuery  ready方法实现原理详解
Oct 19 #Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 #Javascript
You might like
PHP 压缩文件夹的类代码
2009/11/05 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python实现智能语音天气预报
2019/12/02 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
超市活动计划书
2014/04/24 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2014年团工作总结
2014/11/27 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
预备党员群众意见
2015/06/01 职场文书