Opérations associées de dom-repeat et VM dans le framework Polymer de JavaScript_Connaissances de base

Divers frameworks ont pour fonction de lier les données d'une liste au DOM. Par exemple, Angular utilisera ng-repeat pour se lier. Et les polymères ? En fait, ce niveau de fonctionnalité est une extension du framework, et le ng-repeat d'Angular n'est qu'une directive. La répétition dom de Polymer est également de ce niveau.
Chez Polymer, tout est un concept Directive. dom-module est utilisé pour définir des modules et est lui-même une directive. Il en va de même pour dom-repeat, mais ce n'est pas une balise, mais une directive basée sur la balise template. On peut l'utiliser comme ceci :
Courez

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <ul>
   <template is="dom-repeat" items="[[data]]">
    <li>
     第 <strong>[[index]]</strong> 项，
     值为 <strong>[[item]]</strong>
    </li>
   </template>
  </ul>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    data: {
     type: Array,
     value: [ 'a', 'b', 'c', 'd' ]
    }
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Le code ci-dessus définit l'attribut is d'un élément de modèle sur dom-repeat, de sorte que le contenu de l'élément de modèle est bouclé. Cette boucle itère en fonction de l'attribut items fourni sur l'élément de modèle. Notez que les éléments doivent être un tableau. Même si cela peut être un peu gênant à utiliser, je pense que cette restriction est une très bonne pratique. Cela évite divers problèmes causés par l'utilisation de for-in pour traverser comme Angular.
Pour chaque élément d'éléments, son index et sa valeur seront placés dans les deux attributs index et item pour être utilisés par le modèle dans le modèle, de sorte que l'exemple ci-dessus génère l'index et la valeur donnés.
Cependant, la mise à jour des données de Polymer n'est pas basée sur une comparaison de données sales, donc la mise à jour dynamique des données peut être un peu gênante. Par exemple, si nous avons un bouton, si nous voulons ajouter un élément à chaque fois que nous cliquons dessus, nous devrions l'écrire comme ceci
Courez

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <input placeholder="请输入内容" value="{{value::input}}" />
  <button on-click="append">添加一项</button>
  <ul>
   <template is="dom-repeat" items="[[data]]">
    <li>
     第 <strong>[[index]]</strong> 项，
     值为 <strong>[[item]]</strong>
    </li>
   </template>
  </ul>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    data: {
     type: Array,
     value: [ 'a', 'b', 'c', 'd' ]
    }
   },
   append: function() {
    // data.push(this.value); // 这么写是不行的
    this.push('data', this.value)
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Nous avons déjà dit que Polymer définirait les données dont les modifications doivent être surveillées en tant que propriété d'accesseur, mais si vous modifiez les éléments du tableau, il n'y a en fait aucune modification dans le tableau lui-même. Lorsque nous attribuons un tableau à une VM, nous copions en fait les éléments au lieu d'y lancer l'objet tableau. En d'autres termes, cet objet tableau n'est pas une référence directe à la VM. L'utilisation de cet objet tableau ne peut pas affecter la VM, donc pousser directement le tableau est simplement une poussée vers les données.
Bien que la méthode push de la baie elle-même ne puisse pas faire fonctionner la VM, Polymer lui-même fournit également certaines méthodes pour faire fonctionner directement la VM. Par exemple, this.push dans l'exemple ci-dessus est fourni par Polymer. Son modèle d'opération n'est pas un objet, mais un chemin d'accès sur la VM (par exemple, le premier paramètre 'data' du push dans l'exemple ci-dessus est le chemin d'accès aux données dans la VM).
En plus du push, il existe également des opérations pop, shift et autres opérations similaires aux méthodes natives (mais veuillez noter qu'il ne s'agit pas de méthodes élémentaires). Même si c'est effectivement gênant à opérer, ce n'est pas au point d'avoir la nausée. De toute façon, je peux à peine l'accepter.