Могут ли дочерние элементы dom-repeat быть привязаны к элементам массива?

Question

Я пытаюсь создать простой список заметок, используя Polymer 2, где каждая заметка отображается в <input> элемент. Создать список <input> элементы, <dom-repeat> компонент используется. Я заметил, что когда элемент из массива удаляется, все valueс <input> элементы смещены вверх и последний <input> элемент удален Есть ли способ вместо этого удалить <input> элемент, который был связан с удаленным элементом массива?

Я понимаю, что, как правило, это не будет серьезной проблемой, но с <input> элемент, фокус привязан к фактическим объектам DOM. Чтобы правильно сфокусироваться, value атрибуты <input> элементы не должны изменяться при удалении заметки.

Ниже приведен мой код для компонента списка заметок и компонента 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