在模块之间发送消息

Question

不太清楚在使用可重用组件时如何在模块之间发送消息。

我有一个扩展文本区域，我想在网站的多个不同部分使用它。文本区域接受构成用户操作的 HTML 的一部分。通常处理提交、取消、上传图标等。

试着写一个简单的例子来说明我正在谈论的内容，而不是在此处投入大量代码。所以本质上，我只想即插即用 HTML 已经连接的 peices。

我假设 CancelNote 作为 TextArea 消息被触发，所以它永远不会看到 Cancel Note 消息。不确定我将如何在这里使用 Html.map（或者即使我会）......感觉即插即用方法可能是一种糟糕的方法，但不确定我还能如何实现良好的可重用性。

SEPERATE MODULE

update model msg =
    case msg of
        CancelText ->
            ( { model | note = (Just "") }
            , Cmd.none
            )


view: stuff
view stuff = 
......
    TextArea.view 
         (button [ Html.Events.onClick CancelText] [])






TEXT AREA MODULE 


view : Html.Html msg -> Html msg
view actionHtml =
    div [ class "extended_text_area_container" ] [
        textarea [] [
        ]
        , actionHtml
    ]

Answer 1

消息就像任何其他值一样只是值。你可以直接传递它们：

-- SEPERATE MODULE


view: stuff
view stuff = 
......
    TextArea.view CancelText



-- TEXT AREA MODULE 


view : msg -> Html msg
view msg =
    div [ class "extended_text_area_container" ]
        [ textarea [] []
        , button [ onClick msg ] []
        ]

编辑：如果您还需要维护内部状态，只需使用另一条消息告诉父级更新状态即可：

-- Main module


type msg =
    ...
    SetTextAreaState TextArea.state


update model msg =
    case msg of
        ...
        SetTextAreaState state ->
            { model | textAreaState = state }


view : Model -> Html msg
    TextArea.view SetTextAreaState model.textAreaState



-- TextArea module

type State =
    ...

type Msg =
    Clicked


update : State -> Msg -> State
update state msg =
    case msg of
        Clicked ->
            { state | clicked = True }


view : (State -> msg) -> State -> Html msg
view toMsg state =
    let
        updateAndWrap msg =
            toMsg (update state msg)
    in
    div [ class "extended_text_area_container" ]
        [ textarea [] []
        , button [ onClick (updateAndWrap Clicked) ] []
        ]

这里，不是直接在TextArea.view中传递一个msg到onClick，而是调用一个更新状态的函数，然后将其包装在传递的msg构造函数中从父级输入，这将产生一条我们一无所知的类型的消息。

此外，虽然我使用内部 Msg 类型和 update 功能类似于整个 Elm 架构，但这绝不是强制性的。这是一种很好的实现方式，因为它很熟悉并且可以很好地扩展。

在模块之间发送消息

Sending messages between modules

elm