birden çok örneği

Question

Ben sadece bir defada yerel bir dosya seçmenize olanak sağlar bu basit unsur, sen kaldırabilir öğeleri olarak seçilen gösterir dosyalar, böyle bir şey:

Bileşenin kendisi iyi çalışıyor, sorun aynı sayfada aynı türde başka bir bileşen var, ama farklı bir ana öğe (ve gizli) içinde. Bu ilk dosya seçicideki n dosyalarını seçtiğimde, diğer üst bileşeni görüntülemek için bu ikinci dosya seçici, ilk dosyada aynı dosyaları gösterir.

Bu dosya bileşenlerinden ikisini aynı üst öğeye yerleştirirseniz, birinde bir dosya seçilmesi aynı dosyayı diğerinde göstermez, ancak bunlardan herhangi birindeki bir dosyayı kaldırmak, bileşen dosyaları dizisini yapar Her ikisinde de (seçili olan her dosyayı saklıyorum) özellik, sonuçta bunlardan birinden öğeleri kaldıramadı.

Sorunumun bir şekilde kapsülleme ile ilgili olduğunu sanıyorum, ancak nedenini anlayamıyorum. Bu benim bileşenin kodu:

<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

bir nesne veya dizi değeri bir özelliği başlatırken, yerine bir nesne sahip olmaktan her öğe değeriyle kendi kopyasını alır emin olmak için bir işlevini kullanın veya dizi öğesinin tüm örneklerinde paylaşıldı.

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