我正在尝试一个简单的Elm CRUD示例,但是当我向模型中的一个项目列表添加一个新项目时,DOM不会重新呈现。
现在,我只是添加了一个静态记录,我可以通过elm-reactor调试器确认模型正在更改,但是映射的div项并没有更新新的itemView元素。
我觉得我可能遗漏了Elm架构/虚拟dom中相当重要的一部分。有人能告诉我正确的方向吗?
import Html exposing (Html, text, beginnerProgram, div, input, button)
import Html.Events exposing (onInput, onClick)
import List exposing (map, repeat, append)
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update }
type alias Model =
{ items : List Item
, inputTxt : String }
model : Model
model =
{ items = items
, inputTxt = inputTxt }
type alias Item =
{ id : Int
, txt : String }
item : Item
item =
{ id = 0
, txt = "some text" }
items : List Item
items =
repeat 2 item
inputTxt : String
inputTxt =
""
type Msg
= NoOp
| ChangeTxt String
| AddItem
update : Msg -> Model -> Model
update msg model =
case msg of
NoOp ->
model
ChangeTxt newTxt ->
{ model | inputTxt = newTxt }
AddItem ->
{ model | items = model.items ++ [{ id = 0, txt = "some text" }] }
view : Model -> Html Msg
view model =
div [] [
div [] [ itemsView items ]
, div [] [
input [ onInput ChangeTxt ] []
]
, div [] [
text model.inputTxt
]
, div [] [
button [ onClick AddItem ] [ text "click me!" ]
]
]
itemView : Item -> Html Msg
itemView item =
div [] [
div [] [ text ( toString item.id ) ]
, div [] [ text item.txt ]
]
itemsView : List Item -> Html Msg
itemsView items =
div [] [
div [] (List.map itemView items)
]发布于 2017-02-08 08:08:03
view函数的第二行应该是
div [] [ itemsView model.items ]现在,它总是呈现上面定义的items,而不是模型中的项。
https://stackoverflow.com/questions/42102011
复制相似问题