Elm'de seçilen seçeneğin indeksi nasıl yazdırılır?

Question

3 seçenekleri ve <p> öğesi olan bir <select> HTML öğem var. <p> öğesinde şu anda seçili öğenin dizinini <select>'da yazdırmak istiyorum. Örneğin. İlk seçeneği seçersem, 0 seçeneğini basmalı, ikinci seçeneği seçersem 1 yazmalı ve böyle devam etmeli. Aşağıda verilen minimum koddan nasıl devam edebilirim?

import Html as H exposing (Html) 
import Maybe 
import Signal as S exposing (Address, (<~)) 

type alias Model = { selected : Maybe Int } 
model = { selected = Nothing } 

type Action = NoOp | Select Int 
update action model = 
    case action of 
    NoOp -> model 
    Select n -> { model | selected <- Just n } 

view address model = 
    H.div [] 
    [ H.select [] [ H.option [] [ H.text "0" ] 
        , H.option [] [ H.text "1" ] 
        , H.option [] [ H.text "2" ] 
        ] 
    , H.p [] [ H.text <| Maybe.withDefault "" 
        <| Maybe.map toString model.selected ] 
    ] 

actions = Signal.mailbox NoOp 
main = view actions.address <~ S.foldp update model actions.signal 

Answer 1

bir elm-html 2.0.0 içinde different events bir sürü, ama <select> HTML öğesine alakalı bir şey yok. Yani, on kullanarak oluşturabileceğiniz özel bir olay işleyicisine kesinlikle ihtiyacınız var. Bu bir türde:

on : String -> Decoder a -> (a -> Message a) -> Attribute 

Eğer <select> içindeki bir seçenek “change” denir seçmek her zaman tetiklenir olay. İhtiyacınız olan şey, selectedIndex özelliğini ustilize eden elm-community/html-extra'dan targetSelectedIndex.

son kod şu şekilde görünecektir:

Elm-0,18

import Html exposing (..) 
import Html.Events exposing (on, onClick) 
import Html.Attributes exposing (..) 
import Json.Decode as Json 
import Html.Events.Extra exposing (targetSelectedIndex) 


type alias Model = 
    { selected : Maybe Int } 


model : Model 
model = 
    { selected = Nothing } 


type Msg 
    = NoOp 
    | Select (Maybe Int) 


update : Msg -> Model -> Model 
update msg model = 
    case msg of 
     NoOp -> 
      model 

     Select s -> 
      { model | selected = s } 


view : Model -> Html Msg 
view model = 
    let 
     selectEvent = 
      on "change" 
       (Json.map Select targetSelectedIndex) 
    in 
     div [] 
      [ select [ size 3, selectEvent ] 
       [ option [] [ text "1" ] 
       , option [] [ text "2" ] 
       , option [] [ text "3" ] 
       ] 
     , p [] 
      [ text <| 
       Maybe.withDefault "" <| 
        Maybe.map toString model.selected 
      ] 
     ] 


main : Program Never Model Msg 
main = 
    beginnerProgram { model = model, view = view, update = update } 

güncellendi Sen Yine burada tarayıcıda