Как получить входные значения для обновления при переупорядочении элементов в обновлении 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 ] []
]