单击按钮时未调用更新功能

Update function not called on button click

我的更新函数在单击按钮(应该发送消息)后没有被调用。

下面是使用 onClick 事件触发函数的代码:

[ input [ type_ "submit", onClick TopicSelected, value (getTopic topic) ] []

这是更新函数:

update : Msg -> Model -> Model
update msg model =
    case msg of
        TopicSelected ->
            { model
                | articles = []
                , podcasts = []
                , videos = []
            }

view model =
    div []
        [ table []
            [ tr [] [ td [] [ b [] [ text "Videos" ] ] ]
            , div [] <| contentUI model.videos
            , tr [] [ td [] [ b [] [ text "Podcasts" ] ] ]
            , div [] <| contentUI model.podcasts
            , tr [] [ td [] [ b [] [ text "Articles" ] ] ]
            , div [] <| contentUI model.articles
            ]
        ]

下面是路由 onClick 事件的整个函数:

topicTocheckbox : Topic -> Html Msg
topicTocheckbox topic =
    div []
        [ input [ type_ "submit", onClick TopicSelected, value (getTopic topic) ] []
        , label [] [ text <| getTopic topic ]
        ]

code can be found on GitHub.

查看您的代码,您试图在 Home.elm 中使用 Contributor.elm 的嵌套 "component",但您并未在父级(主页)中进行连接更新功能。

这是 Elm 社区中一个广泛且有争议的话题。典型的建议是尽量避免像这样嵌套,除非绝对必要。

如果您绝对需要以这种方式嵌套,那么您的代码将散布 update 情况的变体,如下所示:

type ParentMsg
    = ...
    | ChildMsg Child.Msg

type alias ParentModel =
    { ...
    , child : Child.Model
    }

case msg of
    ChildMsg childMsg ->
        let (childModel, childCmd) = Child.update childMsg model.child
        in { model | child = childModel } ! [ Cmd.map ChildMsg childCmd ]

在每一层嵌套中,您都需要连接子状态并来回传递子 Msg 和 Cmds。

更复杂的是,在您的代码中,您正在处理一个贡献者列表,这意味着您还需要传递一个索引,以便您知道您是列表中的哪个贡献者编辑 ().

好消息是 Elm 使重构变得轻而易举!