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沒有更新。

There is a complete example setup at this address.（我可以讓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

子組件不會更改父組件的值。正如Jacob Miles所建議的那樣，你需要發起一個事件來改變這個值。然後從父元素偵聽你可以通知整個元素數組的變化。

這裏是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（我沒有發現其他辦法）。我希望這有幫助。

Answer 2

您可能希望讓您的元素實際上正在進行更改，並引發一個事件，說明它更改了值。然後讓父元素監聽它，當它收到一個改變的事件時，它可以執行this.notifyPath('elements');調用。

在您調用notifyPath傳遞對象時，它應該是字符串路徑而不是對象。