dom-repeat子要素を配列項目にバインドできますか？

Question

ポリマー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で実装されていますが、まだマスターブランチにマージされていません。詳細はこちらをご覧ください：https://github.com/Polymer/polymer/issues/4558