Question

我有一个组件可以更新其父级的数组。具体来说，它需要添加，创建一个已经排序的全新数组，覆盖原始数组。

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中重复，即使它们没有在数据中重复。< / p>

运行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()等 - 我事先并不知道数据插入的索引，我只想对整个数组进行排序并进行更新。

Answer 1

使用the deep option for ractive.set()确保DOM更新以匹配新的数组值 - 即使数组是一个简单的基元数组。

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

我也尝试了shuffle，这是建议的，但这不起作用，使用shuffle时DOM仍与数组值不一致。

虽然问题已经解决，但我仍然对为什么需要 deep感兴趣才能正确更新DOM，所以如果您有自己的答案，请添加它和我＆＃l; l;接受它！

如何使用Ractive覆盖数组？

1 个答案: