2017-05-04 71 views
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 
     } 

回答

5

要設置輸入的使用價值Html.Attributes.value沒有text

import Html.Attributes exposing (value) 

... 

First -> 
    div [] 
     [ label [] [ text "First" ] 
     , input [ onInput SetFirst, value model.value1 ] [] 
     ]