Question

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

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

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

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

<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

将属性初始化为对象或数组值时，使用函数确保每个元素都获得自己的值副本，而不是让所有实例共享一个对象或数组。元件。

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

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

1 个答案: