Javascript dom repeat子元素可以绑定到数组项吗？

我试图使用Polymer 2创建一个简单的注释列表，其中每个注释都显示在

元素中。要创建

元素列表，请使用

组件。我注意到，当从数组中删除一个项时，

元素的所有

值

都会向上移动，最后一个

元素也会被删除。是否有办法删除与已删除数组项关联的

元素

我意识到这通常不是一个严重的问题，但是对于

元素，焦点绑定到实际的DOM对象。要获得正确的焦点，删除注释时，

元素的

值

属性不应更改

下面是我的notes列表组件和notes 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>

类注释列表扩展了Polymer.Element{
静态get是（）{return'note list'；}
静态获取属性（）{
返回{
注:{
类型：数组，
值：[]，
通知：正确
},
_新注：{
类型：字符串，
值：“”，
观察员：“_newNoteChanged”
}
};
}
_newNoteChanged（newValue，oldValue）{
如果（新值！=''）{
这个._newNote=''；
this.push（'notes'，{“note”：newValue}）；
}
}
_onNoteDelete（e）{
const noteIdx=this.notes.indexOf（e.model.item）；
本节（“注释”，注释IDX，1）；
}
_onNoteBlur（e）{
如果（e.model.item.note==''）{
本条注释删除（e）；
}
}
}
window.customElements.define（NoteList.is，NoteList）；
X
类NoteAtom扩展了Polymer.Element{
静态get是（）{return'note atom'；}
静态获取属性（）{
返回{
价值：{
类型：字符串，
值：“”，
通知：正确
}
};
}
_onDeleteButton（）{
此.dispatchEvent（新CustomEvent（'delete'））；
}
_onInputBlur（）{
这个.dispatchEvent（新的CustomEvent（'blur'））；
}
}
window.customElements.define（NoteAtom.is，NoteAtom）；

我发现这种行为是在dom repeat中实现的，但尚未合并到主分支中。更多详细信息可在此处找到：

为什么需要从阵列中删除项目我希望用户能够删除注释。