cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript menggunakan pengikatan avalon untuk melaksanakan kemahiran selection_javascript kotak pilihan

JavaScript menggunakan pengikatan avalon untuk melaksanakan kemahiran selection_javascript kotak pilihan

WBOY
WBOYasal
2016-05-16 16:00:511496semak imbas

Pengikatan dupleks dupleks ialah yang paling menarik antara pengikatan avalon, kerana ia membantu pembangun melakukan banyak perkara secara dalaman, membolehkan pembangun menulis kurang kod dan menjadikan kod lebih elegan. Di bawah ialah demonstrasi kasual pilihan penuh kotak semak biasa.

Permintaan: (Cliche, katakan sekali lagi)

1. Selepas kotak pilih semua ditandakan, semua kotak sub-pilihan di bawah akan ditandakan;

2. Jika salah satu daripada kotak sub-pilihan dinyahtandai, nyahtanda semua kotak semak

3 Jika semua kotak sub-pilihan ditandakan, maka kotak semua-pilihan ditandakan 


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

Beberapa perkara perlu dijelaskan:

1.data-duplex-changed bertanggungjawab untuk memantau perubahan dalam kotak pilihan dan mencetuskan panggilan balik.

2.ms-duplex-number="selected" Ini ialah artifak Tatasusunan yang dipilih disegerakkan dengan kotak sub-pilihan dan mempengaruhi satu sama lain. Maksudnya, jika bilangan elemen dalam tatasusunan yang dipilih bertambah atau berkurang, paparan kotak sub-pilihan yang sepadan akan dikemas kini, dan begitu juga sebaliknya.

3.ms-duplex-* perlu daripada jenis yang sama dengan nilai atribut nilai kotak semak, jika tidak, paparan tidak boleh disegerakkan. Seperti di sini, jika nilai kotak semak ialah nombor, gunakan ms-duplex-number.

4 Kadangkala jenis nilai atribut kotak semak tidak boleh dipandang remeh. Saya pernah mengalami ini sebelum ini. Jelas bahawa nombor ID telah diluluskan dari latar belakang, tetapi pandangan tidak dapat disegerakkan Akhirnya, masalah itu diselesaikan dengan menukarnya kepada ms-duplex-string. Jadi '7' atau 7 mesti dinilai dengan jelas.

Daripada contoh kecil ini, anda boleh melihat bagaimana menggunakan mvvc seperti avalon boleh meningkatkan pengalaman pengekodan. Jika tidak, fikirkan berapa banyak untuk gelung yang akan anda tulis jika penghakiman!

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci modul VM dalam NodeJs_node.jsArtikel seterusnya：Penjelasan terperinci modul VM dalam NodeJs_node.js

Artikel berkaitan

Lihat lagi