JavaScript verwendet Avalon-Bindung, um Checkbox-Auswahl_Javascript-Fähigkeiten zu implementieren-js-Tutorial-php.cn

JavaScript verwendet Avalon-Bindung, um Checkbox-Auswahl_Javascript-Fähigkeiten zu implementieren

WBOY

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

Original

1542 Leute haben es durchsucht

Duplex-Duplex-Bindung ist die interessanteste unter den Avalon-Bindungen, da sie Entwicklern hilft, viele Dinge intern zu erledigen, wodurch Entwickler weniger Code schreiben und den Code eleganter gestalten können. Nachfolgend finden Sie eine einfache Demonstration einer gängigen vollständigen Auswahl von Kontrollkästchen.

Anfrage: (Es ist ein Klischee, sagen wir es einfach noch einmal)

1. Nachdem das Kontrollkästchen „Alle auswählen“ aktiviert ist, werden alle Unterauswahlfelder unten aktiviert. Wenn das Kontrollkästchen „Alle auswählen“ nicht aktiviert ist, sind alle Unterauswahlfelder deaktiviert.

2. Wenn eines der Unterauswahlkästchen deaktiviert ist, deaktivieren Sie alle Kontrollkästchen

3. Wenn alle Unterauswahlfelder aktiviert sind, ist das Gesamtauswahlfeld aktiviert

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

Nach dem Login kopieren

Wirkung

Ein paar Punkte müssen erklärt werden:

1.data-duplex-changed ist für die Überwachung von Änderungen im Kontrollkästchen und das Auslösen von Rückrufen verantwortlich.

2.ms-duplex-number="selected" Dies ist ein Artefakt. Das ausgewählte Array wird mit dem Unteroptionsfeld synchronisiert und beeinflusst sich gegenseitig. Das heißt, wenn die Anzahl der Elemente im ausgewählten Array zunimmt oder abnimmt, wird die Ansicht des entsprechenden Unteroptionsfelds aktualisiert und umgekehrt.

3.ms-duplex-* muss vom gleichen Typ sein wie der Attributwert des Kontrollkästchens, andernfalls kann die Ansicht nicht synchronisiert werden. Wenn der Kontrollkästchenwert wie hier eine Zahl ist, verwenden Sie „ms-duplex-number“.

4. Manchmal sollte der Wert des Kontrollkästchenwerts nicht als selbstverständlich angesehen werden. Ich bin schon einmal darauf gestoßen. Es war klar, dass die ID-Nummer im Hintergrund übergeben wurde, aber die Ansicht konnte nicht synchronisiert werden. Schließlich wurde das Problem durch die Änderung in ms-duplex-string gelöst. „7“ oder 7 muss also klar beurteilt werden.

Anhand dieses kleinen Beispiels können Sie sehen, wie die Verwendung von MVVC wie Avalon das Codierungserlebnis verbessern kann. Wenn nicht, überlegen Sie, wie viele for-Schleifen Sie schreiben würden, wenn Sie es beurteilen würden!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.