如何在Elm 0.17中一次突出顯示單個組件？

Question

我有一個遊戲的UI與各種組件，其中一些可以點擊突出顯示（'積極'組件）。目前，每個組件的狀態都可以突出顯示Bool。但是，我想強制一次只突出一個組件 - 因此，如果點擊某個組件，則當前突出顯示的任何其他組件都必須更新爲未突出顯示。

要做到這一點的一種方法是讓共同的祖先將一些消息廣播給所有的孩子，並且每個組件都可以處理這個消息並將其自動關閉 - 但是這看起來相當複雜和浪費。可能有1000個組件，只有兩個正在改變（一個突出顯示，一個突出顯示），爲什麼我應該發送並處理1000條消息？

有沒有更好的方法？

注意：這與Elm 0.17: How to subscribe to sibling/nested component changes非常相似。我認爲有一點不同的是，在這個問題中，只有少量的相關組件，而當其他組件發生變化時，總是發生變化。就我而言，在整個模型中的不同位置有很多組件，並且當其中一個更改很少時，或者其他更改都不會更改。

Answer 1

Elm運行時和虛擬DOM引擎將確保只有被更改的組件纔會被重新渲染。所以我不會太擔心發送消息給1,000個組件。

你的情況：

• 您的更新功能將改變只有2組件設置/取消激活狀態/只發送郵件至2個組件。
• 您的視圖函數將始終運行所有1000個組件
• Elm的虛擬DOM區別引擎將只呈現更改爲DOM的2個組件。

當與內部狀態的組件的工作，你會需要的是：

• 每個部件需要知道它是否處於活動狀態。可能是Bool。 可能是組件的model中的字段。
• 全球model需要知道哪些組件是活動的。可能帶有Maybe Int，其中Int是活動組件的ID。
• 當一個組件被點擊以使其自身處於活動狀態時，它將嚮應該包含其ID的父對象發送一些Msg，所以父級知道哪個組件現在處於活動狀態。 （請參閱example here以瞭解其工作原理）
• 父代的update函數會在其獲取消息元素時更新其自己的model中的活動元素。並且父級更新1或2個子組件來更改這些組件的活動標誌。

Answer 2

是的，可能有更好的方法。不建議在應用程序的多個位置複製某個狀態，因爲這會導致同步問題並使調試更加困難。

相反，如果不在組件中存儲突出顯示的狀態，只能在主模型中存儲。然後組件的視圖函數將採用額外的布爾「突出顯示」參數。

要將突出顯示的狀態存儲在主模型中，您可以爲每個組件添加一個ID並將highlighted : Maybe ID添加到模型中。

因此，您只需將點擊消息從孩子傳播給父母，而不是從父母傳播給孩子。