可以將重複子元素綁定到數組項嗎？

Question

我正嘗試使用Polymer 2創建一個簡單的註釋列表，其中每個註釋顯示在<input>元素中。要創建元素列表<input>，使用<dom-repeat>組件。我注意到，當陣列中的項目被刪除時，<input>元素的所有value都向上移動，最後一個<input>元素被刪除。有什麼方法可以刪除與已刪除數組項目關聯的<input>元素嗎？

我意識到通常情況下，這不是一個嚴重的問題，但與<input>元素，焦點是綁定到實際的DOM對象。爲了使焦點正確，<input>元素的value屬性在刪除註釋時不應改變。

下面是我的筆記列表組件和note-atom組件的代碼。

<dom-module id="note-list"> 
<template> 
    <ul> 
    <template is="dom-repeat" items="{{notes}}"> 
     <li> 
     <note-atom 
      on-delete="_onNoteDelete" 
      on-blur="_onNoteBlur" 
      value="{{item.note}}"> 
     </note-atom> 
     </li> 
    </template> 
    <li> 
     <note-atom value={{_newNote}}></note-atom> 
    </li> 
    </ul> 
</template> 

<script> 
    class NoteList extends Polymer.Element { 
    static get is() { return 'note-list'; } 
    static get properties() { 
     return { 
     notes: { 
      type: Array, 
      value: [], 
      notify: true 
     }, 
     _newNote: { 
      type: String, 
      value: '', 
      observer: "_newNoteChanged" 
     } 
     }; 
    } 

    _newNoteChanged(newValue, oldValue) { 
     if (newValue !== '') { 
     this._newNote = ''; 
     this.push('notes', {"note": newValue}); 
     } 
    } 

    _onNoteDelete(e) { 
     const noteIdx = this.notes.indexOf(e.model.item); 
     this.splice('notes', noteIdx, 1); 
    } 

    _onNoteBlur(e) { 
     if (e.model.item.note === '') { 
     this._onNoteDelete(e); 
     } 
    } 

    } 

    window.customElements.define(NoteList.is, NoteList); 
</script> 
</dom-module> 


<dom-module id="note-atom"> 
<template> 
    <input type='text' 
    value="{{value::change}}" 
    on-blur="_onInputBlur" 
    placeholder='A new note...' /> 
    <button on-click="_onDeleteButton">X</button> 
</template> 

<script> 
    class NoteAtom extends Polymer.Element { 
    static get is() { return 'note-atom'; } 
    static get properties() { 
     return { 
     value: { 
      type: String, 
      value: '', 
      notify: true 
     } 
     }; 
    } 

    _onDeleteButton() { 
     this.dispatchEvent(new CustomEvent('delete')); 
    } 

    _onInputBlur() { 
     this.dispatchEvent(new CustomEvent('blur')); 
    } 
    } 

    window.customElements.define(NoteAtom.is, NoteAtom); 
</script> 
</dom-module> 

Answer 1

我發現這種行爲是在dom-repeat中實現的，但尚未合併到master分支中。更多細節可以在這裏找到：https://github.com/Polymer/polymer/issues/4558