如何爲動態生成的複選框定義消息？

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 
    ...