Как я могу перезаписать массив с помощью Ractive?

У меня есть компонент, который обновляет массив на его родительском элементе. В частности, он принимает дополнения и создает совершенно новый отсортированный массив, перезаписывая исходный массив.

var sortedUpdatedDomainNames = updatedProposedDomainNames.sort(sorts.domainName)
// even though we sort them, after setting the value, getting it returns the unsorted items
debugger;

Введите в отладчике здесь:

sortedUpdatedDomainNames
(4) ["example.com", "www.example.com", "swag.com", "www.swag.com"]

Хорошо, это работает. Элементы массива сортируются (используя sorts.domainName, который ставит www сразу после родительских доменов)

await parentComponent.set('order.proposedDomainNames', sortedUpdatedDomainNames)

Вот первая проблема: DOM не обновляется должным образом, некоторые элементы дублируются в DOM, даже если они не дублируются в данных.

Однако выполнение parentComponent.update устраняет эти дубликаты:

// Work around odd ractive bug where DOM doesn't update properly
// Trigger an update manually using .update()
// TODO: find proper fix!
await parentComponent.update('order.proposedDomainNames');

Ее вторая проблема: значения теперь не отсортированы (ну, теперь они отсортированы по алфавиту, а это не то, что мне нужно).

parentComponent.get('order.proposedDomainNames');
(4) ["example.com", "swag.com", "www.example.com", "www.swag.com"]

Как перезаписать массив с помощью Ractive?

Пожалуйста, не отправляйте ответы на вопросы: ractive.splice() и т. д. — я не знаю заранее индекс, в который будут вставлены данные, я просто хочу отсортировать весь массив и обновить его.


javascript arrays ractivejs
person mikemaccana    schedule 04.10.2017    source источник
comment
Сопоставляется ли массив с родителем или вы передаете его каким-то другим способом?   -  person Chris Reeves    schedule 04.10.2017
comment
Также проверьте set('path.to.array', ref, { shuffle: true }), который похож на сплайсинг, но по всему массиву. Вы можете использовать его для сортировки массива за пределами компетенции Ractive и неразрушающего его обновления.   -  person Chris Reeves    schedule 04.10.2017
comment
@ChrisReeves Я не уверен, что означает «отображено из». Массив находится в родительском компоненте, но задается дочерним компонентом. В противном случае не могли бы вы переформулировать вопрос? Спасибо.   -  person mikemaccana    schedule 05.10.2017
comment
Извините, был в отпуске. Под отображением я подразумеваю как в <component array="{{array.in.parent}}" />. Если он отображается таким образом, когда вы this.set('array', [...]) из компонента, он должен вести себя точно так же, как this.set('array.in.parent', [...]) в родительском.   -  person Chris Reeves    schedule 08.10.2017
comment
Спасибо @ChrisReeves. Увы, использование ractive.set() с включенным shuffle по-прежнему создает несоответствие DOM: prntscr.com/gv6zea. Запуск orderStatusUI.update('order.proposedDomainNames') сразу же после этого исправляет DOM, чтобы точно отображать список.   -  person mikemaccana    schedule 09.10.2017
comment
@ChrisReeves спасибо за ваше предложение по set() вариантам. Несмотря на то, что массив состоит только из строк, использование deep вызывает правильное обновление DOM. Вернуть его обратно к shuffle не удается. Я не совсем уверен, почему, хотя и был бы признателен за ваши мысли!   -  person mikemaccana    schedule 09.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

Использование опции deep для ractive.set() гарантирует, что DOM обновится в соответствии с новыми значениями массива, даже если массив представляет собой простой массив примитивов.

await parentComponent.set('order.proposedDomainNames', sortedUpdatedDomainNames, { deep: true })

Я также попробовал shuffle, который был предложен, но это не работает, и DOM по-прежнему не соответствует значению массива при использовании shuffle.

Хотя проблема решена, меня по-прежнему интересует, почему deep понадобилось для правильного обновления DOM, поэтому, если у вас есть свой ответ на этот вопрос, добавьте его, и я; принять это!

person mikemaccana    schedule 09.10.2017