Polymer-Datenbindung nicht aktualisiert Array-Mutation

Ich bemerkte, dass Vorlage/Datenbindung in Polymer scheint nicht zu reflektieren, wenn eine Array-Eigenschaft mutiert ist (d. H. push()). Beispielcode unten:Polymer-Datenbindung nicht aktualisiert Array-Mutation

<body> 
    <dom-module id="my-element"> 
    <template> 
     <pre> 
[my-element] 
myArray: [[jsonStringify(myArray)]] 
     </pre> 
    </template> 
    </dom-module> 

    <my-element id="elm"></my-element> 
    <button onclick="pushArray()">pushArray</button> 
    <button onclick="setArray()">setArray</button> 

    <script> 
    (function registerElements() { 
     Polymer({ 
     is: 'my-element', 

     properties: { 
      myArray: { 
      type: Array, 
      value: function() { 
       return []; 
      } 
      } 
     }, 

     pushArray: function(value) { 
      this.push('myArray', {id: value}); 
     }, 

     setArray: function(value) { 
      this.set('myArray', [{id: value}]); 
     }, 

     jsonStringify: function(obj) { 
      return JSON.stringify(obj); 
     } 
     }); 
    })(); 

    function pushArray() { 
     var elm = document.querySelector('#elm'); 
     elm.pushArray('Push'); 
    } 

    function setArray() { 
     var elm = document.querySelector('#elm'); 
     elm.setArray('Set'); 
    } 
    </script> 
</body>

Jedes Mal, wenn ich Sie auf die Schaltfläche pushArray, ein Element „Push“ sollte in myArray hinzugefügt werden, aber es war nicht in der Vorlage [[jsonStringify(myArray)]] wider. Ist das ein erwartetes Verhalten? Wie auch immer, um das zu umgehen?

Quelle

2017-06-10 Andrew See

Der Array-Change-Observer ist ein bisschen schwierig. In Ihrem Code beobachten Sie (myArray) implizit (nur) die Referenz für das (gesamte) Array, die sich nur ändert, wenn Sie setArray ausführen.

Um dies zu umgehen, müssen Sie auch einen tiefen Beobachter verwenden, nämlich myArray.*. Der richtige Code für Ihre dom-module ist daher die folgende:

<dom-module id="my-element"> 
    <template> 
     <pre> 
     [my-element] 
     myArray: [[jsonStringify(myArray, myArray.*)]] 
     </pre> 
    </template> 
    </dom-module>

Live-Demo: http://jsbin.com/yulivuwufu/1/edit?html,css,output

keine weiteren Änderungen am Code erforderlich sind.

Quelle

2017-06-10 12:04:48 alesc

Ich dachte, mit dem 'push()' des Polymers (anstelle von JS native 'push()') bereits gemacht 'myArray' beobachtbar ändern? Hab ich etwas verpasst? –

Sie haben nichts vermisst. Sie müssen * 'push()' von Polymer benutzen, sonst wird auch meine Lösung nicht funktionieren. Aber wie gesagt, Array-Mutationen lösen die Änderung am Array-Objekt selbst nicht aus. Sie müssen also andere Optionen verwenden: einen Tiefenbeobachter 'myArray. *', Einen Array-Längenbeobachter 'myArray.length' oder einen Splice-Observer 'myArray.splices'. – alesc

Polymer-Datenbindung nicht aktualisiert Array-Mutation

Antwort

Verwandte Themen