聚合物 - 設置陣列不更新DOM

我正嘗試使用聚合物的單向數據流。因此，我正在更新聚合物之外的商店，然後在更新時發佈活動。當我第一次設置數組時，它工作。但隨後的時間它不起作用。聚合物 - 設置陣列不更新DOM

這裏有一個筆：http://codepen.io/tylergraf/pen/EyXZva/

下面的代碼：

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/"> 

<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 

<link rel="import" href="iron-icon/iron-icon.html"> 
<script> 
window.theList = [{ 
    stuff: 'stuff' 
}]; 
</script> 
<button id="changeOutside">Increment Value</button> 
<parent-element></parent-element> 

<dom-module id="parent-element"> 

    <template> 
    <div class="list"> 
     <template is="dom-repeat" items="[[list]]"> 
     <child-element item="[[item]]"></child-element> 
     </template> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'parent-element', 
     ready: function(){ 

     document.addEventListener('dispatch', (e)=>{ 
      console.log(e.detail); 
      // this.list = e.detail; 
      this.set('list', e.detail); 
     }); 

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

<dom-module id="child-element"> 
    <template> 
    <ul> 
     <li>Stuff: [[item.stuff]]</li> 
    </ul> 
    </template> 

    <script> 
    Polymer({ 
     is: 'child-element', 
     properties: { 
     item: { 
      type: Object, 
      value: { 
      stuff: 'stuff', 
      things: 'things' 
      } 
     }, 
     } 
    }); 
    </script> 
</dom-module> 

<script> 
var changeOutside = document.querySelector('#changeOutside'); 
var inc = 0; 

changeOutside.addEventListener('click', function(){ 
    var newList = window.theList.map(function(li){ 
    li.stuff = inc++; 
    return li; 
    }); 
    var event = new CustomEvent('dispatch', {detail: newList}); 
    document.dispatchEvent(event); 
}) 
</script>

來源

2016-07-07 Tyler Graf

肯定是有一些奇怪的事情在這裏，下面是一個解決方法，但我很樂意看到聚合物支持這一點。

您的問題是，地圖中的返回值是現有對象的修改版本。對象引用本身沒有改變。因此，儘管從地圖創建了一個新的數組，但該對象本身並沒有改變。

如果更改了此地圖

var newList = window.theList.map(function(li){ 
    li.stuff = inc++; 
    return li; 
});

以下幾點：

var newList = window.theList.map(function(li){ 
    return { 
    stuff: inc++ 
    }; 
});

然後代碼工作正常。

來源

2016-07-07 16:45:24

聚合物 - 設置陣列不更新DOM

回答

相關問題