如何为动态生成的复选框定义消息？

Question

如何为动态生成的复选框定义消息？

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

对我来说，在消息的附加数据上进行模式匹配会更容易。就我而言，我会将该主题附加到TopicSelected union案例。

因此，我希望我能像这样定义的消息：

type Msg 
    = TopicSelected topic 

然而，这并不与example that I am referencing对齐。

下面是正在生成的复选框：

topicsUI : List Topic -> Html Msg 
topicsUI topics = 
    let 
     formattedTopics = 
      topics |> List.map topicTocheckbox 
    in 
     Html.form [ action "" ] formattedTopics 

Answer 1

你可以给TopicSelected的参数。在您链接的例子中，你提到这个Msg定义：

type Msg 
    = ToggleNotifications 
    | ToggleAutoplay 
    | ToggleLocation 

你可以改写这个作为一个Toggle味精用Target类型：

type Target 
    = Notifications 
    | Autoplay 
    | Location 

type Msg 
    = Toggle Target 

那么您可以在update模式匹配的每个变体：

update : Msg -> Model -> Model 
update msg model = 
    case msg of 
    Toggle Notifications -> 
     { model | notifications = not model.notifications } 

    Toggle Autoplay -> 
     { model | autoplay = not model.autoplay } 

    Toggle Location -> 
     { model | location = not model.location } 

查看t他在beginnerProgram例如新的定义是这样的：

checkbox (Toggle Notifications) "Email Notifications" 

这意味着以及您Topic例子。根据Topic是如何定义的，你可以这样做：

type Topic 
    = Math 
    | Literature 
    | Music 

type Msg 
    = TopicSelected Topic 

你onClick看起来是这样的：

onClick (TopicSelected topic) 

和您的更新可以指定通过模式匹配每个主题：

update msg model = 
    case msg of 
    TopicSelected Math -> 
     model 

    TopicSelected Literature -> 
     model 
    ...