如何在Elm 0.17中一次高亮显示一个组件？

Question

我有一个带有各种组件的游戏UI，其中一些组件可以被点击来变得突出显示(“活动”组件)。目前，这是通过在每个可以高亮显示的组件的状态中设置一个布尔来实现的。但是，我想强制一次只有一个组件可以高亮显示-所以，如果单击了某个组件，则当前高亮显示的任何其他组件都必须更新为取消高亮显示。

可能有1000个组件，而且只有两个组件正在更改(一个高亮显示，一个取消高亮显示)，那么为什么我要发送和处理1000条消息呢？

有没有更好的方法？

注意:这看起来非常类似于Elm 0.17: How to subscribe to sibling/nested component changes。我认为一个不同之处在于，在这个问题中，有少量相关的组件，并且当一个组件发生变化时，另一个总是发生变化。在我的例子中，在整个模型中的不同位置有许多许多组件，当一个组件发生更改时，其他组件将很少或没有更改。

Answer 1

是的，可能有更好的方法。不建议在应用程序的多个位置复制某些状态，因为这会导致同步问题，并使调试变得更加困难。

相反，您最好不要将突出显示的状态存储在组件中，而只存储在主模型中。然后，组件的视图函数将采用额外的布尔型“高亮显示”参数。

要将突出显示的状态存储在主模型中，您可以为每个组件指定一个ID，并将highlighted : Maybe ID添加到模型中。

因此，您只需将单击消息从子对象传播到父对象，而不是从父对象传播到子对象。

Answer 2

Elm运行时和虚拟DOM引擎将确保只重新呈现更改过的组件。因此，我不会太担心向1000个组件发送消息。

在您的案例中：

只需更改2个组件即可设置/取消设置活动状态/仅向2个组件发送消息。对于所有1000 component's

• Elm's
• ，虚拟DOM比较引擎将只渲染更改为DOM的2个组件。

在使用内部状态的组件时，您需要的是：

• 每个组件都需要知道它是否处于活动状态。可能是个Bool。可能是组件的model.
• the全局中的一个字段model需要知道哪个组件是活动的。可能使用Maybe Int，其中Int是活动component.
• when的ID，组件被单击以使其自身处于活动状态，它将向父组件发送一些Msg，其中应该包括其ID，因此父组件知道哪个组件现在处于活动状态。(参见如何工作的example here )
• 每当父函数的update函数获得消息元素时，它都会更新它自己的model中的活动元素。并且父组件更新1个或2个子组件以更改这些组件的活动标志。