How to map multi-level nesting components in 0.17

[Luis Fei]

Hi, I was trying to upgrade from 0.16 to 0.17, and meet this problem

I have  a Main.view which contains a Tab.view, and Tab.view contains a LogList.view, so i change the Signal.forwardTo part like this:

-- This is Main module

type alias Model =
    { tabModel : Tab.Model
    , logsModel : LogList.Model
    }

type Msg
    = TabMsg Tab.Msg
    | LogMsg LogList.Msg

view : Model -> Html Msg
view model =
    App.map TabMsg
        <| Tab.view model.tabModel
            [ App.map LogsMsg <| LogList.view model.logModel ]
       

And the compiler complained as the Tab.view is expecting `List (Html Tab.Msg)` but it is `List (Html Msg)`, I understand why the compiler complain like this, the problem is I don't know how to do these kind of  multi-level nesting.

thanks.

BTW, I read https://github.com/evancz/elm-architecture-tutorial/blob/master/nesting/2-counter-list.elm, but it's single child to parent communication.

[Nick H]

Right now, I am guessing your Tab.view has this signature:

Tab.view : Tab.Model -> List (Html Tab.Msg) -> Html Tab.Msg

Try changing it to follow this signature:

Tab.view : (Tab.Msg -> a) -> Tab.Model -> List (Html a) -> Html a

And your Main.view will then look like this:

view model =

  Tab.view TabMsg model.tabModel

    [ App.map LogsMsg <| LogList.view model.logModel ]

The other solution that comes to mind would be to nest the LogList.Model within Tab.Model and nest LogList.Msg within Tab.Msg, but I am guessing you want the Tab component to be more generic than that.

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Luis Fei]

Thanks，Nick，sorry for the later reply

I tried to apply the changes to Tab.view, still have the problem, this time the compiler complained inferring definition has this type: `(Msg -> a) -> Model -> List (Html Msg) -> Html Msg`, and I'm confused how to use this new added TabMsg parameter inside Tab.view

[Nick H]

Can you show us your Tab.view code?

Changing the type signature in the manner I suggested will require changes to the function. It will be easier to explain if I can see what you have right now.

[hulufei]

I already figured it out, thanks

Just map children's msg to parent's msg on children's html events, so the children's view return same Msg type as parent's, that's how to use `TabMsg` inside `Tab.view`

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/yzaZXYKXDvI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.

[Nick H]

Bingo