mehrere Instanzen gleichen Polymerelement Ursache Verhalten auf allen von ihnen

Question

Ich habe dieses einfache Element, das nur können Sie eine lokale Datei zu einem Zeitpunkt wählen, dann zeigt ausgewählte Dateien als Elemente, die Sie entfernen können, so etwas wie dieses:

Die Komponente an sich funktioniert gut, das Problem ist, ich habe eine andere Komponente des gleichen Typs innerhalb der gleichen Seite, aber innerhalb eines anderen Elternelements (und versteckt). Wenn ich in diesem ersten Dateiauswahlfeld n Dateien auswähle und dann zur Anzeige der anderen übergeordneten Komponente wechsle, zeigt dieser zweite Dateiwähler dieselben Dateien an, die auf dem ersten ausgewählt wurden.

Wenn ich zwei dieser Dateikomponenten in dasselbe übergeordnete Element einfüge, zeigt die Auswahl einer Datei in einer der Dateien nicht die gleiche Datei in der anderen an, aber das Entfernen einer Datei aus einer dieser Dateien führt zur Anordnung der Komponentendateien Eigenschaft (wo ich jede ausgewählte Datei speichern) in beiden kürzer, was schließlich dazu führt, dass ich keine Objekte aus einer von ihnen entfernen kann.

Ich nehme an, mein Problem hat mit der Kapselung in irgendeiner Weise zu tun, aber kann nicht herausfinden, warum. Dies ist Code meiner Komponente:

<dom-module id="custom-file-input"> 
<style> 
    ... 
</style> 
<template> 
    <div class="horizontal layout flex relative"> 
     <button class="action" on-click="butclick" disabled$="{{disab}}">{{restexts.CHOOSEFILE}}</button> 
     <div id="fakeinput" class="flex"> 
      <template is="dom-repeat" items="{{files}}" as="file"> 
       <div class="fileitem horizontal layout center"> 
        <span>{{file.0}}</span><iron-icon icon="close" class="clickable" on-click="removeFile"></iron-icon> 
       </div> 
      </template> 
     </div> 
     <input id="fileinput" type="file" on-change="fileChanged" hidden /> 
    </div> 
</template> 
<script> 
    Polymer({ 
     is: "custom-file-input", 
     properties: { 
      files: { 
       type: Array, 
       value: [] 
      }, 
      currentFile: { 
       type: Object, 
       value: {} 
      }, 
      disab: { 
       type: Boolean, 
       value: false, 
       reflectToAttribute: true, 
       notify: true 
      }, 
      restexts: { 
       type: Object, 
       value: JSON.parse(localStorage['resourcesList']) 
      } 
     }, 
     fileChanged: function (e) { 
      this.currentFile = e.currentTarget.files[0]; 
      var elem = this; 

      var fr = new FileReader(); 
      fr.readAsArrayBuffer(this.currentFile); 
      fr.onload = function() { 
       [...convert file to string64...] 
       elem.push('files', [elem.currentFile.name, string64]); 
      }; 
     }, 
     removeFile: function (e) { 
      for (var i = 0; i < this.files.length; i++) { 
       if (this.files[i] == e.model.file) { 
        this.splice('files', i, 1); 
        break; 
       } 
      } 
     }, 
     butclick: function() { 
      this.$.fileinput.click(); 
     } 
    }); 
</script> 
</dom-module> 

Answer 1

Wenn eine Eigenschaft auf ein Objekt oder Array-Wert initialisiert, eine Funktion verwenden, um sicherzustellen, dass jedes Element seine eigene Kopie des Wertes bekommt, anstatt ein Objekt mit oder Array über alle Instanzen des Elements geteilt.

Quelle: https://www.polymer-project.org/1.0/docs/devguide/properties.html#configure-values

{ 
    files: { 
    type: Array, 
    value: function() { return []; } 
    }, 
    currentFile: { 
    type: Object, 
    value: function() { return {}; } 
    }, 
    restexts: { 
    type: Object, 
    value: function() { return JSON.parse(localStorage['resourcesList']); } 
    } 
}