首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >模型更改时Dom不重新渲染(Elm)

模型更改时Dom不重新渲染(Elm)
EN

Stack Overflow用户
提问于 2017-02-08 07:35:29
回答 1查看 456关注 0票数 5

我正在尝试一个简单的Elm CRUD示例,但是当我向模型中的一个项目列表添加一个新项目时,DOM不会重新呈现。

现在,我只是添加了一个静态记录,我可以通过elm-reactor调试器确认模型正在更改,但是映射的div项并没有更新新的itemView元素。

我觉得我可能遗漏了Elm架构/虚拟dom中相当重要的一部分。有人能告诉我正确的方向吗?

代码语言:javascript
复制
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)
    ]
EN

回答 1

Stack Overflow用户

发布于 2017-02-08 08:08:03

view函数的第二行应该是

代码语言:javascript
复制
div [] [ itemsView model.items ]

现在,它总是呈现上面定义的items,而不是模型中的项。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42102011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档