elmと連携して選択してください

Question

elmがカスタム例でどのように動作するかを理解しようとしています。

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

これは、selectで操作する簡単な例です。私は、月の値を変更するたびに値を10倍します。ドキュメントによると、onChangeやonSelectのようなイベントはありません。onで私を作成しなければなりませんか？

Answer 1

はい、変更イベントを処理するには、onを使用する必要があります。 onClickのように、Elmに組み込まれたsource for other event handlersを見ると、それらはすべてon関数を使って構築されていることがわかります。

targetValueIntParseからelm-community/html-extraまでを使用して、オプションから文字列値をintに変換する例を示します。エルム-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 } 

に更新

あなたは（私のような）エルム - 初心者のための今後の参考のために、ブラウザhttps://runelm.io/c/ahz

Answer 2

でこの例を実行することができます：エルム0.18.0 + ELM-LANGと/ html 2.0.0、onInputイベント（下記のコードを参照）works （また、int型の範囲表記（List.rage 0 12の代わりに[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) ]