如何使用Ractive覆蓋數組？

Question

我有一個組件可以更新其父對象上的數組。 具體來說，它需要進行添加，並創建一個已排序的全新數組，覆蓋原始array 。

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不會進行poroperly更新，即使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覆蓋數組？

請不要提交有關re： ractive.splice()等的答案-我事先不知道將在哪里插入數據的索引，我只是希望對整個數組進行排序並對其進行更新。

Answer 1

對ractive.set()使用deep選項可確保DOM更新以匹配新的數組值-即使該數組是簡單的基元數組也是如此。

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

我也嘗試過shuffle ，這是建議的，但是它不起作用，並且在使用shuffle時DOM仍然與數組值不一致。

盡管問題已解決，但我仍然對為何需要deep進行正確的DOM更新感興趣，因此，如果您有自己的答案，請添加它，然后添加； 接受！