recherche

Maison >interface Web >js tutoriel >JavaScript utilise la liaison avalon pour implémenter les compétences de sélection de case à cocher_javascript

JavaScript utilise la liaison avalon pour implémenter les compétences de sélection de case à cocher_javascript

WBOY
WBOYoriginal
2016-05-16 16:00:511541parcourir

La liaison duplex duplex est la plus intéressante parmi les liaisons avalon, car elle aide les développeurs à faire beaucoup de choses en interne, permettant aux développeurs d'écrire moins de code et de rendre le code plus élégant. Vous trouverez ci-dessous une démonstration informelle d’une sélection complète de cases à cocher courante.

Demande : (C’est cliché, répétons-le)

1. Une fois la case Sélectionner tout cochée, toutes les cases de sous-sélection ci-dessous sont cochées ; si la case Sélectionner tout n'est pas cochée, toutes les cases de sous-sélection sont décochées

2. Si l'une des cases de sous-sélection n'est pas cochée, décochez toutes les cases

3. Si toutes les cases de sous-sélection sont cochées, alors la case de sélection totale est cochée 

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

Effet

Quelques points doivent être expliqués :

1.data-duplex-changed est chargé de surveiller les modifications apportées à la case à cocher et de déclencher les rappels.

2.ms-duplex-number="selected" Il s'agit d'un artefact. Le tableau sélectionné est synchronisé avec la boîte de sous-option et s'affecte mutuellement. C'est-à-dire que si le nombre d'éléments dans le tableau sélectionné augmente ou diminue, la vue de la boîte de sous-option correspondante sera mise à jour, et vice versa.

3.ms-duplex-* doit être du même type que la valeur de l'attribut de valeur de case à cocher, sinon la vue ne peut pas être synchronisée. Comme ici, si la valeur de la case à cocher est un nombre, utilisez ms-duplex-number.

4. Parfois, le type de valeur de l'attribut de valeur de case à cocher ne doit pas être pris pour acquis. J'ai déjà rencontré ce problème. Il était clair que le numéro d'identification avait été transmis en arrière-plan, mais la vue n'avait pas pu être synchronisée. Finalement, le problème a été résolu en le remplaçant par ms-duplex-string. Donc « 7 » ou 7 doit être jugé clairement.

À partir de ce petit exemple, vous pouvez voir comment l'utilisation de mvvc tel qu'avalon peut améliorer l'expérience de codage. Sinon, pensez au nombre de boucles for que vous écririez si vous jugez !

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du module VM dans NodeJs_node.jsArticle suivant：Explication détaillée du module VM dans NodeJs_node.js

Articles Liés

Voir plus