più istanze di stesso comportamento dell'elemento causa polimero su ognuna di esse

Question

ho questo semplice elemento che solo consente di selezionare un file locale alla volta, i file mostra poi selezionati come elementi che si possono rimuovere, qualcosa di simile:

Il componente funziona da solo, il problema è che ho un altro componente dello stesso tipo all'interno della stessa pagina, ma all'interno di un elemento genitore diverso (e nascosto). Se seleziono n file su questo primo selettore di file, quindi passa a visualizzare l'altro componente principale, questo secondo selettore di file mostra in esso gli stessi file selezionati sul primo.

Se inserisco due di questi componenti di file nello stesso elemento padre, selezionando un file in uno di essi non viene visualizzato lo stesso file nell'altro, ma la rimozione di un file da uno di essi rende l'array di file del componente proprietà (dove memorizzo ogni file selezionato) più breve in entrambi, portando infine a non essere in grado di rimuovere elementi da uno di essi.

Il mio problema ha a che fare con l'incapsulamento in qualche modo, ma non riesco a capire perché. Questo è un codice di mio componente:

<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

Quando si inizializza una proprietà a un valore oggetto o array, utilizzare una funzione per garantire che ogni elemento ha la propria copia del valore, piuttosto che avere un oggetto o array condiviso su tutte le istanze dell'elemento.

Fonte: 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']); } 
    } 
}