Anweisungen zur Verwendung von dom-if- und is-Attributen im JS-Framework Polymer_Grundkenntnisse

Wir benötigen häufig eine Vorlagenwiedergabe basierend auf dem Wert eines bestimmten Attributs, bei dem es sich um die grundlegendste Verzweigungsanweisung handelt. Es gibt ng-if in Angular und natürlich gibt es dom-if in Polymer. Tatsächlich ist dom-if eine sehr einfache Sache. Es ist nur der Zugangspunkt für dieses Thema. Was ich vorstellen möchte, ist das Attribut is.
Wie das zuvor eingeführte dom-repeat wird dom-if für das Vorlagenelement über das Attribut is verwendet. Im folgenden Beispiel entscheiden beispielsweise zwei Vorlagen, wer basierend auf einem booleschen Wert auf einem gebundenen Steuerelement
gerendert werden soll 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 type="checkbox" checked="{{checked::change}}">
  <template is="dom-if" if="[[checked]]">true</template>
  <template is="dom-if" if="[[!checked]]">false</template>
 </template>
 <script>
  Polymer({
   properties: {
    checked: { value: false }
   },
   is: 'demo-test'
  });
 </script>
</dom-module>

<demo-test></demo-test>

Ob es sich um dom-if oder die vorherige dom-repeat handelt, was genau legen diese is-Attribute fest? Tatsächlich ist es dasselbe wie Angular. Beides sind Direktivenkonzepte, aber Polymer nennt es nicht Direktive. Wir können so etwas komplett selbst erstellen. Im folgenden Beispiel fügen wir beispielsweise ein is="demo-test"-Ding zum div-Element hinzu
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" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 关键就在这里
  ready: function(e) {
   this.innerHTML = '我是一个 demo-test';
  }
 });
</script>

<div is="demo-test"></div>

Geben Sie beim Definieren einen Tag-Namen über „extends“ an, um eine is-Direktive zu erhalten. Das obige Beispiel ist die einfachste Verwendung. Wir können Shadow DOM selbst erstellen und tun, was wir wollen. Tatsächlich werden auch Polymers integrierte Dom-Repeat, Dom-If und andere Dom-* auf diese Weise definiert. Aber diese Sache sieht im Detail sehr kompliziert aus und mein Artikel ist nur eine Einstiegssache. Wenn Sie eine genauere Verwendung erfahren möchten, sollten Sie den Quellcode lesen (ich kann nicht einmal das offizielle Dokument finden, in dem er definiert ist). .