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 相关文章推荐
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
微信小程序左滑删除实现代码实例
Sep 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环境搭建最新方法
2006/09/05 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python实现备份目录的方法
2015/08/03 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python导入坐标点的具体操作
2019/05/10 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
社区先进事迹材料
2014/05/19 职场文书
市场营销计划书范文
2015/01/16 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers