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 相关文章推荐
Javascript remove 自定义数组删除方法
Oct 20 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
原生js二级联动效果
Jun 20 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue使用swiper实现左右滑动切换图片
Oct 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js原型链原理看图说明
2012/07/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
javascript实现下雨效果
2017/03/27 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python编写Windows Service服务程序
2018/01/04 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
基于python实现高速视频传输程序
2019/05/05 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python实现的分层随机抽样案例
2020/02/25 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
审核会计岗位职责
2013/11/08 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
学校元旦晚会方案
2014/02/19 职场文书
工作分析计划书
2014/04/30 职场文书
南京南京观后感
2015/06/02 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书