JavaScript的Polymer框架中dom-repeat與VM的相關作業_基礎知識

各種框架都有把一個清單資料綁定到 DOM 上的功能，例如 Angular 會用 ng-repeat 來綁定。那麼 Polymer 呢？其實這個等級的功能屬於框架的擴充功能了，Angular 的 ng-repeat 也只是個 Directive 而已。 Polymer 的 dom-repeat 也是這個等級的東西。
　　在 Polymer 中，一切都是 Directive 的概念。 dom-module 用來定義模組，它本身也是一個 Directive。 dom-repeat 也是，但它不是一個標籤，而是一個基於 template 標籤的 Directive。我們可以這樣使用它：
運行

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

　　上面的程式碼對某個 template 元素設定 is 屬性為 dom-repeat，於是這個 template 元素內的東西就被循環了。這個循環是根據在 template 元素上提供的 items 屬性來遍歷。注意 items 必須是數組，雖然用起來可能有點不太方便，但我覺得這個限制是一個非常好的做法。避免了像 Angular 那樣使用 for-in 去遍歷所導致的各種問題。
　　items 的每一項，其索引和值會被放入 index 和 item 這兩個屬性中供 template 內的模板使用，於是上面的例子就輸出了給定的索引和值。
　　然而 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 的，所以直接對陣列做 push 只是對資料的 push。
　　雖然數組自己的 push 方法無法操作 VM，但 Polymer 自己也提供了一些直接操作 VM 的方法，例如上面例子中的 this.push 就是 Polymer 提供的。它的操作模板不是一個對象，而是 VM 上的一個存取路徑（例如上面範例中 push 的第一個參數 'data' 就是 VM 中 data 存取路徑）。
　　除了 push 之外還有 pop、shift 等一些類似原生方法的操作（但要注意他們不是元素方法）。雖然操作起來確實不太方便，但也不至於到噁心的程度，反正我是勉強能接受的。