Ändern Sie einen Datensatzwert mit einer Auswahl in Elm

Question

Ich versuche, eine einfache Sache zu tun, aber es ist schwer für mich zu verstehen, wie zu codieren. dieses Medium

type alias Model = 
    { month : Int 
    , cost : Int 
    , email : String 
    } 

Ich habe 2 Möglichkeiten, um mit diesem Modell arbeiten Angenommen: - entweder vom Benutzer verändert Monat und es dynamisch Kosten ändert (Kosten = Monat * 10) in diesem Beispiel - oder Benutzer sendet und sendet Daten auf einem Server mit einem jSON-Format

Meine Ansicht wie folgt aussieht: Leider verstehe ich nicht

durationOption duration = 
    option [value (toString duration) ] [ text (toString duration)] 

view model = 
    Html.div [] 
    [ 
    , input [ placeholder "my@email.com" ] [] 
    , select [] 
     (List.map durationOption [0..12]) -- month selector 
    , Html.span [][text (toString model.total)] -- value automatically updated when users changes month value in the select 
    , button [ onClick Submit ] [text "Send"] 
    ] 

wie Werte zu aktualisieren, wie einfach die Kosten aktualisieren:

update : Msg -> Model -> (Model, Cmd Msg) 
update action model = 
    case action of 
    Submit -> 
     (model, Cmd.none) 
    {- 
    Calculate -> 
     ???? 
    -} 

Ich denke, ich muss Calculate anrufen, aber ich verstehe wirklich nicht, wie zu tun ist. Ich habe Beispiel aus der Dokumentation gelesen, aber es gibt nichts mit Auswahl ... Kann mir bitte jemand helfen?

Answer 1

Wie in your previous question müssen Sie das Ereignis change im Dropdown-Menü behandeln, um über Änderungen benachrichtigt zu werden.

Zuerst definieren wir eine Nachricht, die wir für Änderungen im Dropdown-Menü Monat verwenden können.

Aktualisiert Elm-0,18

type Msg 
    = Submit 
    | MonthChanged Int 

Wir brauchen dann MonthChanged in die on Ereignishandler zu übernehmen. Dies geschieht mit Json-Decodern, aber Sie benötigen einen Json-Decoder, der den String-Wert in der Option in eine Ganzzahl umwandelt. Verwenden wir also targetValueIntParse von elm-community/html-extra, um den on "change"-Handler zu definieren. Ihr select Code sieht wie folgt aus:

select [ on "change" (Json.map MonthChanged targetValueIntParse) ] 

Schließlich Ihre update Funktion benötigt die month und cost Werte im Modell zu setzen. Sie können dies tun, die folgende in der Case-Anweisung durch Zugabe:

MonthChanged month -> 
    ({ model | month = month, cost = month * 10 }, Cmd.none) 

Ich habe ein funktionierendes Beispiel geschrieben https://runelm.io/c/h2k, die Sie im Browser