Operasi berkaitan dom-repeat dan VM dalam rangka kerja Polimer JavaScript_Pengetahuan asas

Pelbagai rangka kerja mempunyai fungsi mengikat data senarai ke DOM Contohnya, Angular akan menggunakan ng-repeat untuk mengikat. Bagaimana pula dengan Polimer? Malah, tahap kefungsian ini adalah lanjutan daripada rangka kerja, dan Angular's ​​ng-repeat hanyalah Arahan. Ulangan dom polimer juga berada pada tahap ini.
Dalam Polimer, semuanya adalah konsep Arahan. dom-module digunakan untuk mentakrifkan modul dan ia sendiri merupakan Arahan. Perkara yang sama berlaku untuk dom-repeat, tetapi ia bukan teg, tetapi Arahan berdasarkan teg templat. Kita boleh menggunakannya seperti ini:
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>
  <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>

Kod di atas menetapkan atribut is bagi elemen templat kepada dom-repeat, jadi kandungan elemen templat digelung. Gelung ini berulang berdasarkan atribut item yang disediakan pada elemen templat. Ambil perhatian bahawa item mestilah tatasusunan Walaupun ia mungkin sedikit menyusahkan untuk digunakan, saya fikir sekatan ini adalah amalan yang sangat baik. Ia mengelakkan pelbagai masalah yang disebabkan oleh menggunakan for-in untuk melintasi seperti Angular.
Untuk setiap item item, indeks dan nilainya akan dimasukkan ke dalam dua indeks atribut dan item untuk digunakan oleh templat dalam templat, jadi contoh di atas mengeluarkan indeks dan nilai yang diberikan.
Walau bagaimanapun, kemas kini data Polimer tidak berdasarkan perbandingan data yang kotor, jadi kemas kini data dinamik mungkin agak menyusahkan. Sebagai contoh, jika kita mempunyai butang, jika kita ingin menambah item setiap kali kita mengkliknya, kita harus menulisnya seperti ini
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 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>

Kami berkata sebelum ini bahawa Polimer akan menetapkan data yang perlu dipantau untuk perubahan sebagai sifat pengakses, tetapi jika anda menukar elemen tatasusunan, sebenarnya tiada perubahan pada tatasusunan itu sendiri. Apabila kami menetapkan tatasusunan kepada VM, kami sebenarnya menyalin elemen dan bukannya membuang objek tatasusunan ke sana. Dalam erti kata lain, objek tatasusunan ini bukan rujukan langsung kepada VM Mengendalikan objek tatasusunan ini tidak boleh menjejaskan VM, jadi menolak tatasusunan secara langsung hanyalah menolak kepada data.
Walaupun kaedah tolak tatasusunan itu sendiri tidak boleh mengendalikan VM, Polimer sendiri juga menyediakan beberapa kaedah untuk mengendalikan VM secara langsung Sebagai contoh, ini.push dalam contoh di atas disediakan oleh Polimer. Templat operasinya bukan objek, tetapi laluan akses pada VM (contohnya, parameter pertama 'data' tolak dalam contoh di atas ialah laluan akses data dalam VM).
Selain push, terdapat juga operasi pop, shift dan lain-lain yang serupa dengan kaedah asli (tetapi sila ambil perhatian bahawa ia bukan kaedah elemen). Walaupun ia memang menyusahkan untuk beroperasi, ia tidak sampai ke tahap loya, saya hampir tidak boleh menerimanya.