avalon框架系列-指令(三)
8.ms-for
avalon2.0的ms-for绑定集齐了ms-repeat, ms-each, ms-with的所有功能, 并且更好用, 性能提升七八倍
循环生成的变量前面不带@, 就找不到其对应的属性,需要特别注意一下
1.ms-for可以同时循环对象与数组(采用类似 for ... in ... 的写法)
- {{el}}
2.循环时需要用到数组下标或者对象属性名时候,这个变量是在el前面(熟悉Vue的人可能会不习惯这样写)
- {{el}}
- {{el}}
3.指令支持截取数组的一部分出来单独循环,可以用limitBy过滤器, 使用as来引用新数组
- {{el}}
显示数组的前10个元素, 并且将这10个元素存放在items数组中, 以保存过滤或排序结果
1.可用于ms-for中的过滤器有limitBy, filterBy, selectby, orderBy
只想循环输出数组的其中一部分,请使用filterBy,
只想循环输出对象某一些键值并设置默认值,则用selectBy
只想按照某种规律循环,则用orderBy,对数组与对象都有效, 用于排序, 有两个参数
key: 要排序的属性名
dir: -1或1, 顺序或倒序,可选,默认1
4.使用注释节点实现循环,解决同时循环多个元素的问题(这个我没有太理解是什么意思,期待交流)
5.ms-for和ms-if尽量不要在同一标签上使用,会循环生成大量的注释节点
9.ms-on
1.此绑定为元素添加交互功能，对用户行为作出响应. ms-on-*="xxx"是其使用形式,
*代表click, mouseover, touchstart等事件名，只能与小写形式定义，
xxx是事件回调本身，可以是方法名，或表达式。
默认,事件回调的第一个参数是事件对象($event),并进行标准化处理.
如果你是用ms-on-click="@fn(el, 1)"这样的传参方式，第一个传参被你占用，
而你又想用事件对象，可以使用$event标识符，即ms-on-click="@fn(el, 1, $event)" 那么第三个参数就是事件对象。
2.如果你想绑定多个点击事件,可以用ms-on-click-1="@fn(el)", ms-on-click-2="@fn2(el)",ms-on-click-3="@fn3(el)"来添加。
这种方式还未见过,不知道如何,同时出发多个函数操作?还是依次触发?
3.avalon对常用的事件,还做了快捷处理,你可以省掉中间的on。可以直接写 :click='xxx'
animationend、 blur、 change、 input、 click、 dblclick、 focus、
keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、
mousemove、 mouseout、 mouseover、 mouseup、 scroll、 submit
10.ms-duplex
该指令主要用于双工绑定,用于表单元素上.或当div设置了contenteditable为true
1.输入型控件
如input(部分type值) textarea等,可以使用debounce过滤器
{{@aaa}} 300ms同步一次
2.单选多选
checkbox与radio是一点击就会更新.
radio要求在vm中为一个简单数据类型数据,字符串,数字或布尔.
而checkbox则要求是一个数组.
并且在最开始时,ms-duplex会令radio钩上其value值等vm属性的控件,
checkbox则可以勾选多个.
如此一来,vm中的属性些总是等于radio与checkbox的属性值.但我们也可以让 vm的属性值等于此控件的勾选状态,
这时需要用上ms-duplex-checked转换器.
3.select控件
根据其multiple属性分为单选下拉框与复选下拉框,
其在vm中的值与radio,checkbox一样.
即单选时,必须是一个简单数据类型,
复选时为一个数组.
在最开始时, 当option元素的value值或innerText(不在value值)与数据相同,它们就会被选上.
aaa: 'bbb',
bbb: ['bbb','ccc'],
4.数据转换
ms-duplex-string="@aaa"
ms-duplex-number="@aaa"
ms-duplex-boolean="@aaa"
ms-duplex-checked="@aaa"
前三个是将元素的value值转换成string, number, boolean（只有为'false'时转换为false）
最后是根据当前元素（它只能是radio或checkbox）的checked属性值转换为vm对应属性的值。