2017-05-04 4 views
3

Ich bin der folgende Code innerhalb Elm Reaktor (0.18) und nach dem Klicken auf die Schaltfläche "Switch", die Etiketten richtig neu anordnen, aber der Text in den Feldern eingegeben nicht. Der Debugger zeigt an, dass die Werte im Modell korrekt sind, aber es scheint, als ob nur ein Teil des DOM aktualisiert wird. Was mache ich falsch?Wie Eingangswerte zu aktualisieren, wenn Artikel in Elm Update aktualisieren

(Hinweis: Diese in Firefox 52.0.2 und Chrome 57.0.2987.11, sowohl auf Ubuntu 16.04 zu passieren scheint)

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 
     } 

Antwort

5

Um den Wert eines Eingangs Verwendung Html.Attributes.value nicht text

import Html.Attributes exposing (value) 

... 

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