javascript使用avalon绑定实现checkbox全选_javascript技巧
程序员文章站
2022-03-30 08:09:53
...
duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅。下面随便演示一个常见的checkbox全选。
要求:(老掉牙了,还是说一下)
1.勾选了全选框后,下面的子选框全被勾选;没勾选全选框,则子选框全部不勾选
2.子选框如果有一个未勾选,则取消全选框勾选;
3.子选框全部勾选,则勾选全选框
全选
- {{el.text}}
选中项的id:{{selected}}
效果
需要说明几点:
1.data-duplex-changed负责监听checkbox的变化,进而触发回调。
2.ms-duplex-number="selected"这个就是神器,selected数组是和子选项框同步的,互相影响。也就是说,selected数组的元素个数增加或减少,会更新相应子选项框的视图,反之亦然。
3.ms-duplex-*需要与checkbox value属性值的类型相同,否则无法同步视图。像这里,checkbox value值是数字,则用ms-duplex-number。
4.checkbox value属性值的类型有时不要想当然的去判定。本屌就遇到过,明明从后台传过来的是id数字,却无法同步视图,最后改成ms-duplex-string才解决问题。所以'7'还是7,要判断清楚。
从这个小例子可以看到用avalon这类mvvc是多么的提升编码体验,如果不用,想想要写多少个for循环+if判断!
以上所述就是本文的全部内容了,希望大家能够喜欢。
推荐阅读
-
使用JavaScript实现全选(全不选)按钮
-
Javascript实现CheckBox的全选与取消全选的代码
-
PHP中使用Session配合Javascript实现文件上传进度条功能_php技巧
-
使用js操作css实现js改变背景图片示例_javascript技巧
-
js使用栈来实现10进制转8进制与取除数及余数_javascript技巧
-
使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧
-
使用js实现雪花飘落效果_javascript技巧
-
使用js实现数据格式化_javascript技巧
-
使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧
-
使用js实现一个可编辑的select下拉列表_javascript技巧