How do I regenerate the template contents after outside modification of objects used in a dom-repeat template?

Question

How do I regenerate the template after outside modification of objects used for dom_repeat template?

I have a files list created with a paper-item list, drawn from an array with file objects.

Now when I update the path on the file object, the list does not update the display value. While all other fields showing the same file are updated.

Am I missing something?

The template code used:

        <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>

The object properties:

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

After selecting a file in the list, the currentfile displays the correct values, but the file list still shows the old path.

Edit: The template below is a dialog that can change the path of the file.

<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();
    },

Before I open the dialog I was setting the file to currentFile or

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

I have now changed this to use a binding. This code is just below the dom-repeat template

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

Now the titlebar of the currentFile gets updated immediately when I am typing, but still the files list does not directly update the current file. Is there any manual way of binding two elements?

Answer 1

This can be achieved using array-selector. I don't think paper-menu uses it. Below is the definition from developer guide. You can read more about it https://www.polymer-project.org/1.0/docs/devguide/templates.html#array-selector

Keeping structured data in sync requires that Polymer understand the path associations of data being bound. The array-selector element ensures path linkage when selecting specific items from an array. The array selector supports either single or multiple selection.

1. You need to include an array selector in your code

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

2. You need to include iron-select event listener to your paper-menu

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

3. In the arraySelect function, select the item using array-selector.

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

4. Pass this selected item to the other elements which updates it.

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

Working plunker: http://embed.plnkr.co/qd0BNMbeAyXSkknaA1tP/preview