Arahan untuk menggunakan atribut dom-if dan is dalam kerangka JS Pengetahuan Polimer_Asas

Kami selalunya memerlukan pemaparan templat berdasarkan nilai atribut tertentu, yang merupakan pernyataan cawangan paling asas. Terdapat ng-if tersedia dalam Angular, dan sudah tentu terdapat dom-if dalam Polimer. Sebenarnya, dom-if adalah perkara yang sangat mudah Ia hanyalah titik akses untuk topik ini.
Seperti dom-repeat yang diperkenalkan sebelum ini, dom-if digunakan pada elemen templat melalui atribut is Contohnya, dalam contoh berikut, dua templat menentukan siapa yang harus diberikan berdasarkan nilai Boolean pada kawalan terikat
. Lari

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

Sama ada dom-if atau dom-repeat sebelumnya, apakah sebenarnya yang dinyatakan oleh atribut ini? Sebenarnya, ia adalah sama dengan Angular Kedua-duanya adalah konsep Arahan, tetapi Polimer tidak memanggilnya Arahan. Kita boleh membuat perkara sedemikian sendiri Sebagai contoh, dalam contoh berikut, kita menambah perkara is="demo-test" pada elemen div
Lari

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

Apabila mentakrifkan, nyatakan nama teg melalui lanjutan untuk mendapatkan arahan ialah. Contoh di atas adalah penggunaan paling mudah Kita boleh membuat Shadow DOM sendiri dan melakukan apa yang kita mahu. Malah, dom-repeat terbina dalam Polimer, dom-if dan dom-* lain juga ditakrifkan dengan cara ini. Tetapi perkara ini kelihatan sangat rumit secara terperinci, dan artikel saya hanyalah perkara peringkat permulaan Jika anda ingin mengetahui penggunaan yang lebih khusus, anda harus membaca kod sumber (saya tidak dapat mencari dokumen rasmi di mana ia ditakrifkan). .