duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅。下面随便演示一个常见的checkbox全选。
要求:(老掉牙了,还是说一下)
1.勾选了全选框后,下面的子选框全被勾选;没勾选全选框,则子选框全部不勾选
2.子选框如果有一个未勾选,则取消全选框勾选;
3.子选框全部勾选,则勾选全选框
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ margin-left: 100px; } #wrap li{ display: inline-block; *display: inline; zoom:1; vertical-align: middle; } </style> <script type="text/javascript" src='seed.js'></script> </head> <body> <div id='wrap' ms-controller='duplex'> <p><input type='checkbox' data-duplex-changed="select_all_cb" ms-duplex-checked='select_all'>全选</p> <ul> <li ms-repeat='list'> <input type='checkbox' ms-duplex-number="selected" ms-attr-value='el.id'>{{el.text}} </li> </ul> <p>选中项的id:{{selected}}</p> </div> <script type="text/javascript"> require('avalon',function(avalon){ var duplex=avalon.define('duplex',function(vm){ 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(this.checked){ avalon.each(list,function(i,v){//循环保存着已经勾选选框的数据 selected.ensure(v['id']);//如果里面没有当前选框的数据,就保存 }); }else selected.clear();//清空 }; vm.select_all=0; }); duplex.selected.$watch('length',function(after){//监听保存数据数组的变化 var len=duplex.list.length; if(after==len)//子选框全部被勾选 duplex.select_all=1; else//子选框有一个没有被勾选 duplex.select_all=0; }); avalon.scan(); }); </script> </body> </html>
效果
需要说明几点:
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判断!
以上所述就是本文的全部内容了,希望大家能够喜欢。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】