Polymer - Set-Array wird nicht aktualisiert DOM

Question

Ich versuche, einen unidirektionalen Datenfluss mit Polymer zu verwenden. Also aktualisiere ich den Laden außerhalb des Polymers und feuere Ereignisse, wenn sie aktualisiert wurden. Wenn ich das Array zum ersten Mal einstelle, funktioniert es. Aber nachfolgende Zeiten funktionieren nicht.

Hier ist ein Stift: http://codepen.io/tylergraf/pen/EyXZva/

Hier ist der Code:

<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> 

Answer 1

Es ist auf jeden Fall etwas seltsam hier los ist, finden Sie eine Abhilfe, aber ich würde gerne dieses Polymer Unterstützung zu sehen.

Ihr Problem dort ist, dass der Rückgabewert in der Karte eine modifizierte Version des vorhandenen Objekts ist. Die Objektreferenz selbst hat sich nicht geändert. Obwohl ein neues Array aus der Karte erstellt wird, hat sich das Objekt selbst nicht geändert.

Wenn Sie diese Karte

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

wie folgt ändern:

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

Dann wird der Code wie erwartet funktioniert.