Pracuj z wiązem i wybierz

Question

Próbuję zrozumieć, jak działa wiąz z niestandardowym przykładem.

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

Jest to łatwy przykład do pracy z wyborem. Chciałbym, za każdym razem, gdy zmieniam wartość miesiąca, mnoży się na przykład na 10. Zgodnie z dokumentacją nie ma zdarzeń takich jak onChange lub onSelect, czy muszę tworzyć kopie z on?

Answer 1

Tak, aby obsłużyć zdarzenie zmiany, należy użyć on. Jeśli spojrzysz na source for other event handlers wbudowany w Wiąz, jak onClick, zobaczysz, że wszystkie zostały zbudowane przy użyciu funkcji on.

Oto przykład użycia wartości targetValueIntParse z elm-community/html-extra do zamiany wartości ciągu z opcji na int.

Aktualizacja do 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 } 

Można uruchomić ten przykład w przeglądarce https://runelm.io/c/ahz

Answer 2

w przyszłości przez Elm początkujących (jak ja): z Elm 0.18.0 + wiąz-lang/html 2.0.0, zdarzenie onInput (zobacz poniższy kod) works. (Również zauważyć różnicę w notacji zakresu int (List.rage 0 12 zamiast [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) ]