Question

如何在外部修改用于dom_repeat模板的对象后重新生成模板？

我有一个用纸质项目列表创建的文件列表，从带有文件对象的数组中提取。

现在，当我更新文件对象上的路径时，列表不会更新显示值。显示同一文件的所有其他字段都会更新。

我错过了什么吗？

使用的模板代码：

        <paper-menu attr-for-selected="value" selected="{{currentFile}}">
            <template id="filesList" is="dom-repeat" items="{{files}}">
                <paper-item value="{{item}}">
                    <div>{{item.path}}</div>
                    <paper-icon-button icon="fa:pencil" on-tap="propertiesAction"></paper-icon-button>
                </paper-item>
            </template>
        </paper-menu>

对象属性：

        files: {
            type: Object,
            value: [],
            notify: true,
            observer: 'filesChanged'
        },
        currentFile: {
            type: Object,
            notify: true
        },

在列表中选择文件后，currentfile显示正确的值，但文件列表仍显示旧路径。

修改下面的模板是一个可以更改文件路径的对话框。

<template>
    <editor-dialog
        id="inputDialog"
        style="z-index: 14"
        title="{{title}}">
        <paper-input id="fileName" name="filename" label="Filename" value="{{file.path}}"></paper-input>
        <paper-button id="saveButton">Save</paper-button>
        <!--paper-input name="mode" value="false"></paper-input-->
    </editor-dialog>
</template>

Polymer({
    is:'editor-file-properties',
    properties: {
        file: {
            type: Object,
            value: {},
            notify: true
        },
        title: {
            type: String,
            value: function () {
                return this.file ? 'Edit file properties' : 'New file';
            }
        }
    },
    listeners: {
        'saveButton.tap': 'saveFile'
    },
    saveFile: function() {
        var sFileName = this.$.fileName.value;
        if (sFileName == "")
            return;

        if (!this.file)
        {
            var obj = this;
            FileModel.create(sFileName, function (file) {
                obj.file = file;
            });
        }
        this.notifyPath('file.path', this.file.path);
        this.$.inputDialog.close();
    },

在我打开对话框之前，我将文件设置为currentFile或

this.$.fileDialog.file = this.currentFile;

我现在已将此更改为使用绑定。此代码位于dom-repeat模板

下方

<editor-file-properties id="fileDialog" file="{{currentFile}}"></editor-file-properties>

现在，当我输入时，currentFile的标题栏会立即更新，但文件列表仍然不会直接更新当前文件。是否有任何手动方式绑定两个元素？

Answer 1

这可以使用array-selector来实现。我不认为paper-menu使用它。以下是开发者指南中的定义。您可以阅读更多相关信息https://www.polymer-project.org/1.0/docs/devguide/templates.html#array-selector

保持结构化数据同步需要Polymer理解绑定数据的路径关联。数组选择器元素从阵列中选择特定项时确保路径链接。该数组选择器支持单选或多选。

您需要在代码中包含数组选择器

<array-selector id="selector" items="{{files}}" selected="{{selectedFile}}"></array-selector>

您需要在iron-select

中添加paper-menu个事件监听器

<paper-menu selected="{{selectedIndex}}" on-iron-select="arraySelect">

在arraySelect函数中，使用数组选择器选择项目。

arraySelect: function (e) {
  var item = this.$.filesList.itemForElement(e.explicitOriginalTarget);
  this.$.selector.select(item);
}

将此选定项目传递给更新它的其他元素。

<editor-file-properties id="fileDialog" file="{{selectedFile}}"></editor-file-properties>

工作人员：http://embed.plnkr.co/qd0BNMbeAyXSkknaA1tP/preview

如何在外部修改dom-repeat模板中使用的对象后重新生成模板内容？

1 个答案: