Home > Developer > Web Develop
Reprint Please specify: theviper http://www.cnblogs.com/TheViper
The Duplex duplex binding is the most interesting of the Avalon bindings because it helps developers do a lot of things internally, reducing the amount of code written by developers and making the code more elegant. Here is a general checkbox for a full selection.
Requirements: (old-fashioned, or say)
1. After check box is selected, the following sub-boxes are all checked, and uncheck box is unchecked.
2. If one of the checkboxes is unchecked, uncheck the box with all checkboxes selected;
3. Select All checkboxes and check box
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><title></title><styletype= "Text/css"> *{margin:0;padding:0; }#wrap{Margin-left:100px; }#wrap Li{Display:Inline-block;*display:inline;Zoom:1;vertical-align:Middle; }</style><Scripttype= "Text/javascript"src= ' Seed.js '></Script></Head><Body> <DivID= ' Wrap 'Ms-controller= ' Duplex '> <P><inputtype= ' checkbox 'data-duplex-changed= "SELECT_ALL_CB"ms-duplex-checked= ' Select_all '>Select All</P> <ul> <Lims-repeat= ' list '> <inputtype= ' checkbox 'Ms-duplex-number= "Selected"Ms-attr-value= ' el.id '>{{El.text}}</Li> </ul> <P>Id:{{selected}} of the selected item</P> </Div> <Scripttype= "Text/javascript">require ('Avalon',function(Avalon) {varDuplex=Avalon.define ('Duplex',function(VM) {vm.selected=[];//Save the ID of the checked option for easy access to the backgroundvm.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(){//Select all box Change event callback varList=duplex.list,selected=duplex.selected; if( This. Checked) {Avalon.each (list,function(i,v) {//Loop to save the checked box dataselected.ensure (v['ID']);//If there is no data for the current marquee, save }); }Elseselected.clear ();//Clear }; Vm.select_all=0; }); duplex.selected. $watch ('length',function(after) {//listen for changes in the save data array varLen=duplex.list.length; if( after==len)//The sub-marquee is all checkedDuplex.select_all=1; Else//one of the sub-boxes has not been checkedDuplex.select_all=0; }); Avalon.scan (); }); </Script></Body></HTML>
Effect
Some points need to be explained:
The 1.data-duplex-changed is responsible for monitoring the change of the checkbox and triggering the callback.
2.ms-duplex-number= "Selected" This is the artifact, the selected array is synchronized with the Sub-option box, affecting each other. That is, the number of elements in the selected array increases or decreases, updating the view of the corresponding sub-option box, and vice versa.
The 3.ms-duplex-* needs to be the same type as the CheckBox Value property, otherwise the view cannot be synchronized. Like here, the checkbox value is a number, then use Ms-duplex-number.
The type of the value of the 4.checkbox Value property is sometimes not taken for granted. This dick has met, clearly from the background is the ID number, but unable to synchronize views, and finally changed to ms-duplex-string to solve the problem. So ' 7 ' or 7, be clear.
From this small example, you can see how the MVVC of this type of Avalon improves the coding experience, and if not, how many for-loop +if you want to write!
If you find the content of this article helpful to you, you can reward me with:
Avalon JS Implementation checkbox Select All
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
