JavaScriptのPolymerフレームワークにおけるdom-repeatとVMの関連操作_基礎知識

さまざまなフレームワークには、リスト データを DOM にバインドする機能があります。たとえば、Angular では ng-repeat を使用してバインドします。ポリマーについてはどうでしょうか?実際、このレベルの機能はフレームワークの拡張であり、Angular の ng-repeat は単なるディレクティブです。 Polymerのdom-repeatもこのレベルです。
Polymer では、すべてがディレクティブの概念です。 dom-module はモジュールを定義するために使用され、それ自体がディレクティブです。 dom-repeat も同様ですが、これはタグではなく、テンプレート タグに基づくディレクティブです。次のように使用できます:

を実行します

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

上記のコードは、テンプレート要素の is 属性を dom-repeat に設定するため、テンプレート要素のコンテンツがループされます。このループは、テンプレート要素に指定された items 属性に基づいて反復されます。項目は配列でなければならないことに注意してください。少し使いにくいかもしれませんが、この制限は非常に良い習慣だと思います。これにより、Angular のように for-in を使用してトラバースすることによって引き起こされるさまざまな問題が回避されます。
項目の各項目について、そのインデックスと値は、テンプレート内のテンプレートで使用するために、index と item の 2 つの属性に入れられるため、上記の例では、指定されたインデックスと値が出力されます。
ただし、Polymer のデータ更新はダーティ データの比較に基づいていないため、データの動的な更新は少し面倒かもしれません。たとえば、ボタンがある場合、クリックするたびに項目を追加したい場合は、次のように記述する必要があります

を実行します

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

前に、Polymer は変更を監視する必要があるデータをアクセサー プロパティとして設定すると述べましたが、配列の要素を変更しても、実際には配列自体に変更はありません。配列を VM に割り当てるときは、配列オブジェクトをそこにスローするのではなく、実際に要素をコピーします。つまり、この配列オブジェクトは VM への直接参照ではなく、この配列オブジェクトを操作しても VM に影響を与えることはできないため、配列を直接プッシュすることは、単にデータをプッシュすることになります。
アレイのプッシュメソッド自体は VM を操作できませんが、Polymer 自体も VM を直接操作するためのメソッドをいくつか提供しています。たとえば、上記の例の this.push は Polymer によって提供されています。その操作テンプレートはオブジェクトではなく、VM 上のアクセス パスです (たとえば、上記の例の Push の最初のパラメーター 'data' は VM 内のデータ アクセス パスです)。
プッシュ以外にも、ポップ、シフトなど、ネイティブメソッドに似た操作もあります（ただし、要素メソッドではないことに注意してください）。確かに操作は不便ではありますが、吐き気がするほどではないので、なんとか我慢できます。