如何在外部修改dom-repeat模板中使用的對象後重新生成模板內容？

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重複模板

現在，當我打字的currentFile的標題欄被立即更新，但仍然是文件列表中不直接更新當前文件。有沒有任何手動綁定兩個元素的方法？

Answer 1

這可以使用array-selector來實現。我不認爲paper-menu使用它。以下是開發者指南的定義。你可以閱讀更多關於它https://www.polymer-project.org/1.0/docs/devguide/templates.html#array-selector

同步保持結構化數據要求聚合物理解所綁定的數據的 路徑關聯。從數組中選擇特定項目時，數組選擇器元素 可確保路徑鏈接。 數組選擇器支持單個或多個選擇。

1. 你需要在你的代碼

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

2. 您需要包括iron-select事件偵聽器，您paper-menu

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

3. 在arraySelect功能，包括陣列選擇，使用數組選擇器選擇項目。

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

4. 將此選定項目傳遞給更新它的其他元素。

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

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