同一聚合物元素的多个实例会导致所有这些行为

Question

我有这个简单的元素，它只允许您一次 select 一个本地文件，然后将 selected 文件显示为您可以删除的项目，如下所示：

该组件本身工作正常，问题是我在同一页面中有另一个相同类型的组件，但在不同的父元素（和隐藏）中。如果我 select 第一个文件 selector 上的 n 个文件，然后切换到查看另一个父组件，第二个文件 selector 在其中显示相同的文件 selected在第一个。

如果我将两个文件组件放在同一个父元素中，select在其中一个中创建文件不会在另一个中显示相同的文件，但从任何一个中删除文件它们使组件文件数组属性（我在其中存储每个文件 selected）在两者中都更短，最终导致无法从其中一个中删除项目。

我认为我的问题在某种程度上与封装有关，但无法弄清楚原因。这是我的组件代码：

<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

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

来源：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']); }
  }
}

同一聚合物元素的多个实例会导致所有这些行为

Multiple instances of same polymer element cause behavior on all of them

polymer

polymer-1.0