Arbeiten mit Ulme und wählen

Question

Ich versuche zu verstehen, wie Ulme mit einem benutzerdefinierten Beispiel arbeitet.

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

view : Model -> Html Msg 
view model = 
    Html.div [] 
    [ h2 [] [ text "Month selector"] 
    , select [] 
     (List.map durationOption [1..12])  
    ] 

Es ist ein einfaches Beispiel, mit einer Auswahl zu arbeiten. Ich möchte, dass jedes Mal, wenn ich den Wert des Monats ändere, dieser Wert zum Beispiel mit 10 multipliziert wird. Laut der Dokumentation gibt es keine Ereignisse wie onChange oder onSelect, muss ich meins mit on erstellen?

Answer 1

Ja, Sie müssen on verwenden, um das Änderungsereignis zu verarbeiten. Wenn Sie sich die source for other event handlers in Elm, wie onClick, sehen, werden Sie sehen, dass sie alle mit der on Funktion erstellt werden.

Hier ist ein Beispiel, das targetValueIntParse von elm-community/html-extra verwendet, um den String-Wert von der Option in ein int zu drehen.

zu Elm-0,18

Aktualisiert

import Html exposing (..) 
import Html.Events exposing (on) 
import Html.Attributes exposing (..) 
import Json.Decode as Json 
import String 
import Html.Events.Extra exposing (targetValueIntParse) 


main = 
    beginnerProgram { model = { duration = 1 }, view = view, update = update } 


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


view : Model -> Html Msg 
view model = 
    Html.div [] 
     [ h2 [] [ text "Month selector" ] 
     , select [ on "change" (Json.map SetDuration targetValueIntParse) ] 
      (List.map durationOption (List.range 1 12)) 
     , div [] [ text <| "Selected: " ++ (toString model.duration) ] 
     ] 


type Msg 
    = SetDuration Int 


type alias Model = 
    { duration : Int } 


update msg model = 
    case msg of 
     SetDuration val -> 
      { model | duration = val } 

Sie dieses Beispiel in Browser ausgeführt werden kann https://runelm.io/c/ahz

Answer 2

Für die Zukunft für Elm-Neulinge (wie ich): mit Elm 0.18.0 + Ulme-lang/html 2.0.0, das onInput Ereignis (siehe Code unten) works. (Beachten Sie auch den Unterschied in der Int-Bereichsnotation (List.rage 0 12 anstelle von [0..12]).

import Html exposing (..) 
import Html.Attributes exposing (..) 
import Html.Events exposing (onInput) 


main = 
    Html.beginnerProgram 
    { model = model 
    , view = view 
    , update = update 
    } 



-- MODEL 


type alias Model = 
    { duration : Int 
    } 


model : Model 
model = 
    Model 0 



-- UPDATE 


type Msg 
    = SetDuration String 


update : Msg -> Model -> Model 
update msg model = 
    case msg of 
    SetDuration s -> 
     let result = 
     String.toInt s 
     in 
     case result of 
      Ok v -> 
      { model | duration = v } 

      Err message -> 
      model 


-- VIEW 


view : Model -> Html Msg 
view model = 
    div [] 
    [ select [ onInput SetDuration ] 
      (List.range 0 12 |> List.map intToOption) 
    , div [] [ text <| "Selected: " ++ (toString model.duration) ]   
    ] 


intToOption : Int -> Html Msg 
intToOption v = 
    option [ value (toString v) ] [ text (toString v) ]