avalon繫結實現checkbox全選簡單介紹

antzone發表於2017-04-07

duplex雙工繫結是avalon繫結裡面最有趣的一個，因為它在內部幫開發者做了很多事，讓開發者寫的程式碼減少，程式碼更優雅。

下面隨便演示一個常見的checkbox全選。

實現要求:

（1）.勾選了全選框後，下面的子選框全被勾選；沒勾選全選框，則子選框全部不勾選。

（2）.子選框如果有一個未勾選，則取消全選框勾選。

（3）.子選框全部勾選，則勾選全選框。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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,要判斷清楚。

相關文章