Wiele wystąpień samego polimeru zachowania elementem przyczyny na każdym z nich

Question

mam to prosty element, który po prostu pozwala wybrać plik lokalny na raz, a następnie przedstawia wybrane pliki jako elementów, które można usunąć, coś takiego:

Komponent sam w sobie działa dobrze, problem polega na tym, że mam inny komponent tego samego typu na tej samej stronie, ale wewnątrz innego elementu nadrzędnego (i ukrytego). Jeśli wybiorę n plików na tym pierwszym selektorze plików, a następnie przełączam się na widok drugiego elementu nadrzędnego, ten drugi selektor plików pokazuje w nim te same pliki, które zostały wybrane na pierwszym.

Jeśli umieściłem dwa komponenty tego pliku w tym samym elemencie nadrzędnym, wybranie pliku w jednym z nich nie spowoduje wyświetlenia tego samego pliku w drugim, ale usunięcie pliku z dowolnego z nich spowoduje utworzenie tablicy plików składników Właściwość (gdzie przechowuję każdy wybrany plik) jest krótsza w obu, co ostatecznie może uniemożliwić usunięcie elementów z jednego z nich.

Zakładam, że mój problem związany jest z enkapsulacją w jakiś sposób, ale nie mogę zrozumieć dlaczego. Jest to kod mojego komponentu:

<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

Podczas inicjalizacji właściwość wartość obiektu lub tablicy, użyć funkcji, aby zapewnić, że każdy element dostaje własną kopię wartości, zamiast obiektu lub tablica współużytkowana we wszystkich instancjach elementu.

Źródło: 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']); } 
    } 
}