本文介绍了榆树0.17:如何订阅兄弟/嵌套组成的变化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请参阅全面实施与接受的答案,这里的建议:

See the full implementation with the suggestions of the accepted answer here: https://github.com/afcastano/elm-nested-component-communication

=============================================== ==================

=================================================================

我有两个孩子一个父组件。 (见code为例)

I have one parent component with two children. (See code example)

随着榆树架构,我怎么能更新正确的儿童在任何左子变化,柜台的?

With the Elm Architecture, how can I update the right child when any of the counters in the left child change?

目前,我有父组件读左子模型的嵌套属性并将其设置为正确的儿童模特,但在我看来,家长不应该很了解的内部结构儿童。

At the moment, I have the parent component reading the nested property of the left child model and setting it to the right child model, but it seems to me that the parent shouldn't know that much about the internal structure of the children.

这是模型和封邮件:

type alias MainModel =
  { counterPair : CounterPair
  , totals: Totals
  }

type alias CounterPair =
  {
    greenCounter : Counter
  , redCounter : Counter
  }

type alias Counter =
  {
    value : Int
  , totalClicks : Int
  }

type alias Totals =
  {
    totalRed : Int
  , totalGreen : Int
  , combinedTotal : Int
  }

type MainMsg
  =  UpdateCounterPair CounterPairMsg
  |  UpdateTotals TotalsMsg


type alias RedVal = Int
type alias GreenVal = Int

type TotalsMsg
  = UpdateTotals RedVal GreenVal

正如你所看到的,主模型包含两个子型号。反过来对模型,还包括两个计数器模式。

As you can see, the Main model contains two sub models. The pair model in turn, also contains two counter models.

总计模型有兴趣在对组件的CounterModels变化。

The Total model is interested in changes on the CounterModels of the Pair component.

要做到这一点,主要更新功能会是这样的:

To do that, the Main update function would be like this:

updateMain: MainMsg -> MainModel -> MainModel
updateMain msg model =
  case msg of
    UpdateCounterPair counterPairMsg ->
    let
      counterPairModel = updateCounterPair counterPairMsg model.counterPair
      totalsModel = updateTotals (UpdateTotals counterPair.redCounter.value counterPair.greenCounter.value) model.totals
    in
      {model | counterPair = counterPairModel, totals = totalsModel}

这是我不喜欢的事情是在这一行:

The things that I don't like are in this line:

updateTotals (UpdateTotals counterPair.redCounter.value counterPair.greenCounter.value) model.totals

1 - 主模块需要知道如何获取计数器的值,以便它可以通过更新到 updateTotal 功能。

2 - 主模块还需要了解工会类型总计模块,这样就可以使用 UpdateTotals 构造

2 - The Main module also needs to know about the internals of the union type of the Totals module so that it can use UpdateTotals constructor.

有没有在其中总计组件可以订阅组件对未经家长知道模型结构的详细信息任何其他方式?

Is there any other way in which Totals component can subscribe to Pair component without the parent knowing the details of the model structure?

非常感谢你。

推荐答案

如果你有一个组件,并且希望该组件有一个副作用,换句话说,有自身之外的效果,你可以返回一些信息(数据)与模型和Cmd的在一起:

If you have a component and you want that component to have a side-effect, in other words, to have an effect outside of itself, you can return some information (data) together with the model and the Cmd:

更新:消息 - >型号 - > (型号,Cmd的消息,SomeInfo)

家长可以使用 SomeInfo 来决定如何在其他地方做的。

The parent can use SomeInfo to decide what to do in other places.

如果一个组件需要被从外部更新,最好是通过一个自定义的更新功能,以暴露此。在柜台的情况下,这将是这样的:

If a component needs to be updated from outside, it is best to expose this through a custom update function. In the case of a counter this would look like this:

updateValue:INT - >型号 - >型号

这样,您可以自由使用任何你想要的重presentation模块内。那么计数器的家长可以在遇到一些状况更新计数器的模型。

This way, you are free to use whatever representation you want inside the module. The parent of the counter can then update the Model of the counter when it encounters some condition.

像函数值:型号 - >诠释,也可以使用提取计数器的型号信息。

A function like value : Model -> Int can also be use to extract information from the Model of the Counter.

所有这些确保维持而presenting封装到模块的用户进行检索和更新数据的接口。

All these ensure that you maintain encapsulation while presenting to the user of the module an interface for retrieval and updating of data.

这篇关于榆树0.17:如何订阅兄弟/嵌套组成的变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 05:15