JavaScript uses avalon binding to implement checkbox selection

JavaScript uses avalon binding to implement checkbox selection_javascript skills

WBOY

Release： 2016-05-16 16:00:51

Original

1542 people have browsed it

Duplex duplex binding is the most interesting one among avalon bindings, because it helps developers do a lot of things internally, allowing developers to write less code and make the code more elegant. Below is a casual demonstration of a common checkbox full selection.

Request: (It’s cliche, let’s just say it again)

1. After the select all box is checked, all the sub-select boxes below are checked; if the select all box is not checked, all the sub-select boxes are unchecked

2. If one of the sub-select boxes is unchecked, uncheck all the check boxes;

3. If all the sub-select boxes are checked, then the all-select box is checked

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

Copy after login

Effect

A few points need to be explained:

1.data-duplex-changed is responsible for monitoring changes in the checkbox and triggering callbacks.

2.ms-duplex-number="selected" This is an artifact. The selected array is synchronized with the sub-option box and affects each other. That is to say, if the number of elements in the selected array increases or decreases, the view of the corresponding sub-option box will be updated, and vice versa.

3.ms-duplex-* needs to be of the same type as the checkbox value attribute value, otherwise the view cannot be synchronized. Like here, if the checkbox value is a number, use ms-duplex-number.

4. Sometimes the type of checkbox value attribute value should not be taken for granted. I have encountered this before. It was clear that the ID number was passed from the background, but the view could not be synchronized. Finally, the problem was solved by changing it to ms-duplex-string. So '7' or 7 must be judged clearly.

From this small example, you can see how using mvvc such as avalon can improve the coding experience. If not, think about how many for loops you would write if judgment!

The above is the entire content of this article, I hope you all like it.