添加項目到數組不重新渲染

Question

我想使用的dom-repeat這樣的一個模板來呈現項目的動態列表聚合物模板：

<template is="dom-repeat" items={{numbers}} as="anumber" > 
    <div> 
    {{anumber}} 
    <paper-button class="deleteThisNumber" index={{index}}></paper-button> 
    </div> 
</template> 
<paper-button id="addNumber"></paper-button> 

每個項目都有一個按鈕，將刪除此項目。

dom-repeat模板的外部還有一個按鈕，該模板嘗試向數組numbers添加條目。該JS是這樣的：

Polymer ({ 

is: "something", 

properties: { 
    numbers: { 
     type: Array, 
     value: ["1"] 
    } 
}, 
removeByIndex: function (array, index) { 
    return array.filter(function (elem, _index) { 
     return index != _index; 
    }); 
}, 
attached: function() { 
    var myself = this; 
    $(this).on('click', '.deleteThisNumber', {}, function (e) { 
     myself.numbers = myself.removeByIndex(myself.numbers, this.index) 
    }); 
    this.$.addNumber.addEventListener("click", function (e) { 
     myself.numbers.push("123"); 
    }) 
}, 
... 
}); 

結果是：刪除的作品，但增加沒有。

通過說「作品」，我的意思是該列表通過添加/刪除條目DOM來反映更改。我檢查了它的屬性numbers它一直在正確修改。那麼爲什麼Polymer沒有將數組屬性的更改反映到模板中，如果更改是添加（array.push）？我應該如何解決這個問題？ （我願意接受比手動添加的div其他任何建議）

我聚合物的版本是1.X

Answer 1

我找到了解決的辦法是強制notifyPath多一點：

myself.numbers.push("123"); //before only has this 
myself.notifyPath('numbers', myself.numbers.slice()); //added 

數組推代碼簡稱https://github.com/Polymer/polymer/issues/2068#issuecomment-120767748

回答從@miyconst

Answer 2

更改爲：

this.$.addNumber.addEventListener("click", function(e) { 
     myself.push("numbers", "123"); 
    }) 

必須有可觀察的變化爲了呈現更新的屬性或子屬性。 可觀察到的變化是Polymer可以與路徑關聯的數據變化。

如果您使用本地方法（如Array.prototype.push）操作數組，則必須事實通知Polymer。或者，使用Polymer方法進行陣列突變。

當修改陣列，提供在其上模擬Array.prototype方法 聚合物元件原型一組陣列突變方法，以 不同之處在於它們需要path字符串作爲第一個參數。參數 path參數標識要變異的元素上的數組，其中 以下參數與原始Array方法的參數匹配。

這些方法對數組執行突變操作，然後 通知可能綁定到相同數組的 更改的其他元素。您必須在對陣列進行變異時使用這些方法，以確保觀察陣列的任何元素（通過觀察者，計算的 屬性或數據綁定）保持同步。

每個聚合物元件具有 可用以下數組突變方法：

push(path, item1, [..., itemN]) 
pop(path) 
unshift(path, item1, [..., 
itemN]) 
shift(path) 
splice(path, index, removeCount, [item1, ..., itemN]) 

Learn More

Answer 3

比你能解決您的代碼的一種方式更多。

1）刪除項目時已經使用的方式。

this.$.addNumber.addEventListener("click", function (e) { 
    myself.numbers.push("123"); 
    myself.numbers = myself.numbers.slice(); 
}) 

2）從自己的答案（略有改動）

this.$.addNumber.addEventListener("click", function (e) { 
    myself.numbers.push("123"); 
    myself.notifyPath("numbers"); 
}) 

3）從@Ofisora

回答

this.$.addNumber.addEventListener("click", function(e) { 
    myself.push("numbers", "123"); 
}) 

這就是爲什麼修復工作，https://www.polymer-project.org/1.0/docs/devguide/data-system#observable-changes