与榆树合作并选择

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

这是一个使用select的简单示例。我想，每次我更改月份值时，它会乘以值10，例如。根据文档，没有像onChange或onSelect这样的事件，我是否必须用on创建我的？

Answer 1

更新：onInput工作，请参阅下面的另一个答案0.19工作代码：https://stackoverflow.com/a/41516493/540810

是的，您需要使用on来处理更改事件。如果你看看内置在Elm中的source for other event handlers，比如onClick，你会发现它们都是使用on函数构建的。

这是一个使用targetValueIntParse的elm-community/html-extra将字符串值从选项转换为int的示例。

已更新至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 }

您可以在浏览器https://runelm.io/c/ahz中运行此示例

Answer 2

对于Elm-newbies（像我一样）的未来参考：使用Elm 0.18.0 + elm-lang / html 2.0.0，onInput事件（见下面的代码）works。 （另请注意int范围表示法的差异（List.range 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) ]

Answer 3

这是Elm 0.19的更新：

module Main exposing (main)

import Browser
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 =
    Browser.sandbox { init = { duration = 1 }, view = view, update = update }


durationOption duration =
    option [ value (String.fromInt duration) ] [ text (String.fromInt 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: " ++ (String.fromInt model.duration) ]
        ]


type Msg
    = SetDuration Int


type alias Model =
    { duration : Int }


update msg model =
    case msg of
        SetDuration val ->
            { model | duration = val }

Answer 4

qazxsw poi手柄的一个例子（你也可以查看qazxsw poi）：

onInput

Answer 5

这适用于Elm 0.19.0上的Ellie：

module Main exposing (main)

import Browser import Html exposing (Html, button, div, text, select, option) import Html.Attributes exposing (value, selected) import Html.Events exposing (onInput) import Dict exposing (Dict)

type alias Model =
    { options : Dict Int (String, Bool)
    }


initialModel : Model initialModel =
    { options = Dict.fromList [(0, ("All time", False)), (1, ("One week", True)), (2, ("24h", False))] 
    }


type Msg
    = Select String


update : Msg -> Model -> Model update msg model =
    case msg of
        Select value ->
            case String.toInt value of
                Just selectedID ->
                    let
                        changeSelection id (label, _) =
                            if id == selectedID then
                                (label, True)
                            else
                                (label, False)
                    in
                    {model | options = Dict.map changeSelection model.options}

                Nothing ->
                    model



view : Model -> Html Msg view model =
    let
        toOption (id, (label, isSelected)) =
            option [value (String.fromInt id), selected isSelected] [text label]
    in
    div []
        [ select [onInput Select] (List.map toOption <| Dict.toList model.options)
        , div [] [text "DEBUG"]
        , div [] [text <| Debug.toString model.options]
        ]


main : Program () Model Msg main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

完整代码：

Ellie