Aurelia: Удаление элементов массива при изменении на пустое значение

Question

У меня есть массив строк, связанных с входными элементами:

<div repeat.for="i of messages.length"> 
    <input type="text" value.bind="$parent.messages[i]"> 
</div> 

Мне нужно удалить элемент, когда содержание ввода удаляются, без использования грязной проверки.

Это звучит просто: просто удалите элемент, который имеет пустое значение из обработчика input.delegate, к сожалению, это не работает из-за Aurelia bug #527. Вот суть, которая пробует этот подход: https://gist.run/?id=e49828b236d979450ce54f0006d0fa0a

Я попытался обойти ошибку, используя queueTask, чтобы отложить удаление элемента массива, но безрезультатно. И так как разработчики закрыли ошибку, потому что, по их словам, это дубликат совершенно не связанной проблемы, я думаю, что она не будет исправлена ​​в ближайшее время.

У меня нет идей, как реализовать это, поэтому любые предложения приветствуются.

Answer 1

Абсолютно никакой необходимости в каких-либо грязных проверках здесь! :)

Вот рабочий пример для сценария: https://gist.run/?id=20d92afa1dd360614147fd381931cb17

• $ родитель больше не нужен. Это было связано с версиями до версии 1.0 Aurelia.
• Если вы используете переменную вместо индексов массива, вы можете использовать двустороннюю привязку данных, предоставляемую вводом.

<template> 
    <div repeat.for="msg of messages"> 
    <input type="text" value.bind="msg" input.delegate="onMessageChanged(msg, $index)"> 
    </div> 
</template> 

Итак, ваше событие OnChange можно упростить следующим образом:

• msg имеет фактическое значение текущего входного сигнала.
• i указатель будет использован для удаления.

export class App { 
    messages = ['Alpha','Bravo','Charlie','Delta','Echo']; 

    onMessageChanged(msg, i){ 
    if (!msg || msg.length === 0) { 
     this.messages.splice(i, 1); 
    } 
    } 
} 

Был связанный с этим вопрос о подобной проблеме. This answer может дать вам более подробную информацию об основной идее.

Answer 2

Итак, решение это не использовать багги (в данном случае) AURELIA 2-связывания, но использовать 1-способ связывания и установить значение от input.delegate обработчика:

https://gist.run/?id=2323c09ec9da989eed21534f177bf5a8

Ответ на @marton кажется с первого взгляда, но фактически отключает двухстороннюю привязку, поэтому любые изменения в входах не копируются в массив. Но это дало мне важный намек на то, как решить проблему. эквивалент этого HTML-код:

<div repeat.for="msg of messages"> 
    <input type="text" value.bind="msg"> 
</div> 

это:

for (let msg of messages) { 
    msg = 'something else'; // note: this does not change the contents of the array 
} 

См issue #444 для более подробной информации

Таким образом, это вынуждает одну сторону переплета. Чтобы исправить это в решении @marton, нам нужно только изменить значение из ввода.делегат-обработчик:

onMessageChanged(msg, i){ 
    if (!msg || msg.length === 0) { 
    this.messages.splice(i, 1);//delete the element 
    } 
    else { 
    this.messages[i] = msg;//change the value 
    } 
}