2017-10-04 50 views
0

我有一個組件更新它的父項上的一個數組。具體而言,它需要添加,並且創建了一個全新的陣列,該陣列已被排序,覆蓋原始陣列如何使用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"] 

OK的作品。該陣列的項目進行排序(使用sorts.domainName其父域後立即將WWW)

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

這裏的第一個問題:DOM不會更新poroperly,一些項目在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()等 - 我不知道提前的數據將被插入的索引,我只是想排序整個數組並更新它。

+0

數組是從父級映射的,還是以某種其他方式傳遞它? –

+0

另外檢查'set('path.to.array',ref,{shuffle:true})',這與拼接類似,但在整個數組中。您可以使用它對Ractive的範圍以外的數組進行排序並以非破壞性方式對其進行更新。 –

+0

@ChrisReeves我;我不知道'映射'是什麼意思。該數組位於父級上,但由子組件設置。否則,請你重新回答這個問題嗎?謝謝。 – mikemaccana

回答

0

使用the deep option for ractive.set()可確保DOM更新以匹配新的數組值 - 即使該數組是一個簡單的基元數組。

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

我也試過shuffle,這是建議,但是,這並不工作,並使用shuffle當DOM仍與數組值不一致。

雖然問題解決了,我還有興趣爲什麼deep需要正確地使DOM更新,所以如果你有自己的答案,將其添加和I'l;接受!