एल्म के साथ काम करें और

Question

का चयन करें मैं समझने की कोशिश करता हूं कि कस्टम उदाहरण के साथ एल्म कैसे काम करता है।

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

यह चयन के साथ काम करने का एक आसान उदाहरण है। मैं चाहूंगा, हर बार जब मैं महीने का मान बदलता हूं तो यह उदाहरण के लिए 10 से मूल्य मानता है। प्रलेखन के अनुसार onChange या onSelect जैसी घटनाएं नहीं हैं, क्या मुझे on के साथ मेरा निर्माण करना है?

Answer 1

हां, आपको परिवर्तन ईवेंट को संभालने के लिए on का उपयोग करने की आवश्यकता होगी। यदि आप source for other event handlers को एल्म में निर्मित करते हैं, जैसे onClick, तो आप देखेंगे कि वे सभी on फ़ंक्शन का उपयोग करके बनाए गए हैं।

यहां एक उदाहरण है जो targetValueIntParseelm-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 + एल्म-लैंग/साथ एचटीएमएल 2.0.0, onInput घटना (नीचे कोड देखें) works। (इसके अलावा पूर्णांक रेंज अंकन में अंतर (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) ]