How can I overwrite an array using Ractive?

Question

I have a componet that updates an array on it's parent. Specifically, it takes additions, and creates an entirely new array that has been sorted, overwriting the original array .

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

Typing in the debugger here:

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

OK that works. The array items are sorted (using sorts.domainName which puts www immediately after parent domains)

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

Here's the first issue : the DOM doesn't update poroperly, some items are duplicated in the DOM even though they're not duplicated in the data.

Running parentComponent.update fixes these duplications, however:

// 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');

Her's the second issue : the values are now unsorted (well, they're sorted alphabetically now, which isn't what I want).

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

How can I overwrite an array using Ractive?

Please do not submit answers re: ractive.splice() etc - I do not know in advance the index where the data will be inserted, I simply wish to sort the entire array and update it.

Answer 1

Using the deep option for ractive.set() ensures the DOM updates to match the new array values - even though the array is a simple array of primitives.

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

I also tried shuffle , which was suggested, but this does not work and the DOM is still inconsistent with the array value when using shuffle .

Though the issue is solved, I'm still interested in why deep was needed to make the DOM update correctly, so if you have your own answer to that, add it and I'l; accept it!