Verwandte Operationen von dom-repeat und VM im Polymer-Framework von JavaScript_Grundkenntnisse

Verschiedene Frameworks haben die Funktion, Listendaten an das DOM zu binden. Angular verwendet beispielsweise ng-repeat zum Binden. Was ist mit Polymeren? Tatsächlich handelt es sich bei diesem Funktionsniveau um eine Erweiterung des Frameworks, und Angulars ng-repeat ist lediglich eine Direktive. Die Dom-Wiederholung von Polymer ist ebenfalls auf diesem Niveau.
Bei Polymer ist alles ein Richtlinienkonzept. dom-module wird zum Definieren von Modulen verwendet und ist selbst eine Direktive. Das Gleiche gilt für dom-repeat, allerdings ist es kein Tag, sondern eine Direktive, die auf dem Template-Tag basiert. Wir können es so verwenden:
Führen Sie
aus

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

Der obige Code setzt das is-Attribut eines Vorlagenelements auf dom-repeat, sodass der Inhalt des Vorlagenelements in einer Schleife ausgeführt wird. Diese Schleife wird basierend auf dem im Vorlagenelement bereitgestellten Attribut „items“ wiederholt. Beachten Sie, dass es sich bei den Elementen um ein Array handeln muss. Auch wenn die Verwendung etwas umständlich ist, halte ich diese Einschränkung für eine sehr gute Vorgehensweise. Es vermeidet verschiedene Probleme, die durch die Verwendung von for-in zum Durchlaufen wie Angular verursacht werden.
Für jedes Element der Elemente werden sein Index und sein Wert in die beiden Attribute index und item eingefügt, um von der Vorlage in der Vorlage verwendet zu werden, sodass das obige Beispiel den angegebenen Index und Wert ausgibt.
Die Datenaktualisierung von Polymer basiert jedoch nicht auf dem Vergleich schmutziger Daten, sodass die dynamische Aktualisierung von Daten möglicherweise etwas mühsam ist. Wenn wir beispielsweise eine Schaltfläche haben und jedes Mal, wenn wir darauf klicken, ein Element hinzufügen möchten, sollten wir es so schreiben
Führen Sie
aus

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

Wir haben zuvor gesagt, dass Polymer die Daten, die auf Änderungen überwacht werden müssen, als Accessor-Eigenschaft festlegt. Wenn Sie jedoch die Elemente des Arrays ändern, ändert sich tatsächlich nichts am Array selbst. Wenn wir VM ein Array zuweisen, kopieren wir tatsächlich die Elemente, anstatt das Array-Objekt dorthin zu werfen. Mit anderen Worten, dieses Array-Objekt ist kein direkter Verweis auf die VM. Das Betreiben dieses Array-Objekts kann sich nicht auf die VM auswirken, daher ist das direkte Pushen des Arrays lediglich ein Push auf die Daten.
Obwohl die Push-Methode des Arrays selbst die VM nicht bedienen kann, bietet Polymer selbst auch einige Methoden zum direkten Betreiben der VM. Beispielsweise wird this.push im obigen Beispiel von Polymer bereitgestellt. Seine Operationsvorlage ist kein Objekt, sondern ein Zugriffspfad auf der VM (z. B. ist der erste Parameter „Daten“ von Push im obigen Beispiel der Datenzugriffspfad in der VM).
Neben Push gibt es auch Pop-, Shift- und andere Operationen, die nativen Methoden ähneln (beachten Sie jedoch, dass es sich nicht um Elementmethoden handelt). Obwohl es in der Tat umständlich zu bedienen ist, verursacht es keine Übelkeit. Ich kann es jedenfalls kaum akzeptieren.