3
我在Elm reactor(0.18)內運行以下代碼,並在單擊「切換」按鈕後,標籤正確重新排序,但輸入框中的文本確實不。調試器顯示模型中的值是正確的,但看起來好像只有部分DOM正在更新。我究竟做錯了什麼?如何在Elm更新中重新排序項目時更新輸入值
(注:這似乎在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
}