0
讓我們考慮下面的代碼：聚合物綁定如何在數組上工作？
<dom-module id="foo-bar">
<template>
<h2>Example 1</h2>
<button on-tap="tap1">Tap 1</button> | <button on-tap="tap2">Tap 2</button>
<hr>
<ul>
<template is="dom-repeat" items="{{myarray}}">
<li>{{index}}: {{item.title}}</li>
</template>
</ul>
<hr>
{{myarray}}
<hr>
<h2>Example 1</h2>
<button on-tap="tap3">Tap 3</button>
<hr>
<ul>
<template is="dom-repeat" items="{{myarray2}}">
<li>{{index}}: {{item.title}}</li>
</template>
</ul>
<hr>
{{myarray2}}
<hr>
</template>
<script>
Polymer({
is: 'foo-bar',
properties: {
myarray: {
type: Array,
value: [null, null],
notify: true
},
myarray2: {
type: Array,
value: [{title: 'a'}, {title: 'b'}],
notify: true
}
},
tap1: function() {
this.myarray = [{title: 'Hello'}, {title: 'World'}];
},
tap2: function() {
this.set('myarray.0', {title: 'Hello'});
this.set('myarray.1', {title: 'World'});
},
tap3: function() {
this.set('myarray2.0', {title: 'Hello'});
this.set('myarray2.1', {title: 'World'});
}
})
</script>
</dom-module>
的原理是顯示陣列（myarray）的內容並更新顯示，只要其內容的變化。
當我點擊Tap 1按鈕時，由於數組完全重新定義，所有事情都按預期工作。
根據documentation，Polymer無法檢測到陣列內部的修改，並且他們推薦使用this.set(...)方法。這就是我在我的代碼tap2功能所做的：
tap2: function() {
this.set('myarray.0', {title: 'Hello'});
this.set('myarray.1', {title: 'World'});
}
然而，當我點擊Tap 2按鈕，即使陣列中的代碼正確更新（我可以用console.log看到它），在列表（<ul></ul>）設置不正確，因爲我得到：
- 0：世界
- 1：
（第一個索引顯示aray的第二個元素的值）和數組的完整顯示（在{{myarray}}中）不會打印任何內容。
另一種場景Tap3行爲正確，因爲我已直接使用對象初始化一個數組（myarray2）。
我也做了另一個測試（不是在Plunker），其中myarray初始化爲[]（而不是[null, null]）。在這種情況下，在點擊按鈕之前或之後，列表（<ul></ul>）始終爲空。
因此，最後，我的問題是瞭解雙重綁定如何工作在數組內容，爲什麼第二種情況（Tap 2）發生？
感謝