dom-repeat中的項目更改未傳達給其他項目

Question

我們正在構建聚合物應用程序。 我們有一個元素數組 ，這些元素使用dom-repeat顯示在組件中。 這是一個示例片段：

//main component
<h2>List of elements</h2>
<template is="dom-repeat" items="{{elements}}" as="item" indexAs="index">
    <another-component element="{{item}}" ident$="{{index}}"></another-component>
</template>

和

//sub component
<h3>{{element.name}}</h3>
<h4>{{element.person.name}}</h4>
<paper-button on-tap="_changeName">Change name!</paper-button>

數組的對象具有一些公共引用。 您可以這樣看：

//main component
<script>
    var fred = {"name": "fred"};
    var tom = {"name": "tom"};

    Polymer({
        is: 'example-component',
        properties: {
            elements: {
                type: Array,
                value: [{"name": "Main1", "person": fred}, {"name": "Main2", "person": tom}, {"name": "Main3", "person": fred}],
                notify: true
            }
        }
    });
</script> 

現在，在我的項目中，我希望能夠更改嵌套元素。

在此示例中，我要更改項目3的人員值。

但是，由於第3項的人員參考與第1項的參考相同，因此我也希望第1個人有所更改。

但是，我的經驗是項目1沒有更新。

在此地址有完整的示例設置。 （我可以讓jsfiddle正確使用我的依賴項...）。

到目前為止，我已經嘗試研究

• 聽眾
• notifyPath
• 觀察者

沒有成功。 我也想避免將整個數組傳遞給項目。

我知道可以使用例如Redux之類的狀態對象輕松解決它，因此不幸的是，這在這里不是解決方案。

我在互聯網上發現了很多有關如何使數據冒泡的資源，但並沒有像我現在想做的那樣冒泡。

任何幫助，將不勝感激。

---

完整的代碼供參考：

主要成分

<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="/components/another-component/another-component.html">

<dom-module id="example-component">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <h1>Example</h1>

        <h2>List of elements</h2>
        <template is="dom-repeat" items="{{elements}}" as="item" indexAs="index">
            <another-component element="{{item}}" ident$="{{index}}"></another-component>
        </template>

    </template>
    <script>
        var fred = {"name": "fred"};
        var tom = {"name": "tom"};

        Polymer({
            is: 'example-component',
            properties: {
                elements: {
                    type: Array,
                    value: [{"name": "Main1", "person": fred}, {"name": "Main2", "person": tom}, {"name": "Main3", "person": fred}],
                    notify: true
                }
            }
        });
    </script>
</dom-module>

子組件

<dom-module id="another-component">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <h3>{{element.name}}</h3>
        <h4>{{element.person.name}}</h4>
        <paper-button on-tap="_changeName">Change name!</paper-button>

    </template>
    <script>
        Polymer({
            is: 'another-component',
            properties: {
                element: {
                    type: Object,
                    notify: true
                }
            },

            _changeName: function(){
                this.set('element.person', {"name": "bobby"});
                this.notifyPath('elements');
                this.notifyPath('element');
                this.notifyPath('element.person');

            }
        });
    </script>
</dom-module>

謝謝，

Answer 1

您可能希望讓實際上正在執行更改的元素觸發一個事件，說它更改了值。 然后讓父元素偵聽它，當它接收到更改的事件時，它可以執行this.notifyPath('elements'); 呼叫。

在對notifyPath的調用中，您傳入的是對象，但它應該是字符串路徑而不是對象。

Answer 2

子組件不會更改父組件的值。 根據Jacob Miles的建議，您需要觸發一個事件來更改值。 然后從父元素監聽，您可以在其中通知整個elements數組的更改。

這是plnkr鏈接： http ://plnkr.co/edit/tuqKh4ANUTspa05GZ9mi?p=preview

子組件，即another-component正在觸發事件“更改名稱”：

this.fire('change-name', {"newPersonName" : "bobby","index":this.i }); 。

父組件（ example-component正在監聽該事件並通知更改：

this.addEventListener('change-name', function (e) {
     this.elements[e.detail.index].person.name = e.detail.newPersonName;

     for(var i =0; i< this.elements.length; i++){
             this.notifyPath('elements.'+i+'.person.name'); 
     }

 });

為了進行通知，我們需要使用更改的確切路徑，因此我將notifyPath保持在循環中（我沒有找到其他方法）。 我希望這有幫助。