Elm ile çalışın ve seçin

Question

Elm'in özel bir örnekle nasıl çalıştığını anlamaya çalışıyorum.

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

Seçimle çalışmak kolay bir örnektir. İstediğim gibi, ay değerini her değiştirdiğimde, örneğin 10'a çarpar. Dökümantasyona göre onChange veya onSelect gibi olaylar değil, on ile benimki oluşturmak zorunda mıyım?

Answer 1

Evet, değişiklik olayını işlemek için on kullanmanız gerekir. onClick gibi Elm içine inşa edilmiş source for other event handlers'a bakarsanız, bunların hepsinin on işlevi kullanılarak oluşturulduğunu görürsünüz.

elm-community/html-extra'dan targetValueIntParse'u, dize değerini seçenek içinden bir int'ye çevirmek için kullanan bir örnek.

Elm-0.18 Sen (benim gibi) Elm-yeni başlayanlar için İleride tarayıcısı https://runelm.io/c/ahz

Answer 2

bu örneği çalıştırabilirsiniz

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 } 

güncellendi: Elm 0.18.0 + karaağaç-lang/ile html 2.0.0, onInput olayı (aşağıdaki kod) works. (Ayrıca) int aralığı gösterimde farkı (List.rage 0 12 yerine [0..12] of edin. Yanıtınız için

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