Lavorare con elm e selezionare

Question

Cerco di capire come elm funziona con un esempio personalizzato.

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])  
    ] 

È un semplice esempio per lavorare con una selezione. Vorrei che, ogni volta che cambio il valore del mese, moltiplica per valore di 10, ad esempio. Secondo la documentazione non ci sono eventi come onChange o onSelect, devo creare il mio con on?

Answer 1

Sì, sarà necessario utilizzare on per gestire l'evento di modifica. Se guardi lo source for other event handlers incorporato in Elm, come onClick, vedrai che sono tutti costruiti usando la funzione on.

Ecco un esempio che utilizza targetValueIntParse da elm-community/html-extra per trasformare il valore di stringa dall'opzione in un numero int.

Aggiornato Elm-0,18

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 } 

È possibile eseguire questo esempio browser https://runelm.io/c/ahz

Answer 2

in futuro per Elm-neofiti (come me): con Elm 0.18.0 + olmo-lang/html 2.0.0, l'evento onInput (vedere il codice di seguito) works. (Notare anche la differenza nella gamma int notazione (List.rage 0 12 invece di [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) ]