Как получить входные значения для обновления при переупорядочении элементов в обновлении Elm

Я запускаю следующий код в реакторе Вяза (0.18) и после нажатия кнопки "Переключить" метки переупорядочиваются, но текст, введенный в поля, не меняется. Отладчик показывает, что значения в модели правильные, но похоже, что обновляется только часть DOM. Что я делаю неправильно?

(Примечание: это происходит в Firefox 52.0.2 и Chrome 57.0.2987.11, оба в Ubuntu 16.04)

module App exposing (..)

import Html exposing (..)
import Html.Events exposing (onInput, onClick)


type Position
    = First
    | Second


type alias Model =
    { value1 : String, value2 : String, order : List Position }


type Msg
    = SwitchOrder
    | SetFirst String
    | SetSecond String


init : ( Model, Cmd Msg )
init =
    ( { value1 = "", value2 = "", order = [ First, Second ] }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SwitchOrder ->
            ( { model | order = List.reverse model.order }, Cmd.none )

        SetFirst new_value ->
            ( { model | value1 = new_value }, Cmd.none )

        SetSecond new_value ->
            ( { model | value2 = new_value }, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


labeledInput : Model -> Position -> Html Msg
labeledInput model position =
    case position of
        First ->
            div []
                [ label [] [ text "First" ]
                , input [ onInput SetFirst ] [ text model.value1 ]
                ]

        Second ->
            div []
                [ label [] [ text "Second" ]
                , input [ onInput SetSecond ] [ text model.value2 ]
                ]


view : Model -> Html Msg
view model =
    div []
        [ List.map (labeledInput model) model.order |> div []
        , button [ onClick SwitchOrder ] [ text "Switch" ]
        ]


main : Program Never Model Msg
main =
    program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

1 ответ

Решение

Для установки значения Input используйте Html.Attributes.value not text

import Html.Attributes exposing (value)

...

First ->
    div []
        [ label [] [ text "First" ]
        , input [ onInput SetFirst, value model.value1 ] []
        ]
Другие вопросы по тегам