菜单

javascript使用avalon绑定完毕checkbox全选_javascript本领_脚本之家

2020年3月1日 - 澳门太阳娱乐手机登录

duplex双工绑定是avalon绑定里面最有趣的叁个,因为它在内部帮开荒者做了无数事,让开采者写的代码收缩,代码更温婉。下边随意演示叁个广泛的checkbox全选。

澳门太阳娱乐手机登录,javascript使用avalon绑定完毕checkbox全选_javascript本领_脚本之家。1.勾选了全选框后,下边包车型地铁子选框全被勾选;没勾选全选框,则子选框整体不勾选

2.子选框万一有三个未勾选,则撤销全选框勾选;

3.子选框全副勾选,则勾选全选框

 *{ margin: 0; padding: 0; } #wrap{ margin-left: 100px; } #wrap li{ display: inline-block; *display: inline; zoom:1; vertical-align: middle; }  全选   {{el.text}}   选中项的id:{{selected}}   require('avalon',function{ var duplex=avalon.define{ vm.selected=[];//保存勾选的选项的id,方便传给后台 vm.list=[{id:1,text:'aaa'},{id:2,text:'bbb'},{id:3,text:'ccc'},{id:4,text:'ddd'},{id:5,text:'eee'},{id:6,text:'fff'}]; vm.select_all_cb=function(){//全选框change事件回调 var list=duplex.list,selected=duplex.selected; if{ avalon.each{//循环保存着已经勾选选框的数据 selected.ensure;//如果里面没有当前选框的数据,就保存 }); }else selected.clear();//清空 }; vm.select_all=0; }); duplex.selected.$watch('length',function{//监听保存数据数组的变化 var len=duplex.list.length; if//子选框全部被勾选 duplex.select_all=1; else//子选框有一个没有被勾选 duplex.select_all=0; }); avalon.scan; 

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决断!

上述所述正是本文的全体内容了,希望我们能够中意。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图