代码之家 › 专栏 › 技术社区 › sof

如何在动态生成的视图中更新模型?

elm

0

sof · 技术社区 · 7 年前

import Browser
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (disabled)
import Html.Events exposing (onClick)


main =
    Browser.sandbox
        { init =
            { count = 0
            , node = text ""
            , inactive = False
            }
        , update = update
        , view = view
        }


type Msg
    = Increment
    | AddNode


update msg model =
    case msg of
        Increment ->
            Debug.log "count"
                { model
                    | count = model.count + 1
                }

        AddNode ->
            let
                viewDynamic =
                    div []
                        [ text (String.fromInt model.count) ]
            in
            { model
                | node =
                    div []
                        [ button [ onClick Increment ] [ text "+" ]
                        , viewDynamic
                        ]
                , inactive = True
            }


view model =
    let
        viewStatic =
            button
                [ disabled model.inactive
                , onClick AddNode
                ]
                [ text "new" ]
    in
    div []
        [ viewStatic
        , model.node
        ]

model.inactive model.count . 如何理想地实现它?

1 回复 | 直到 7 年前

1

0

sof 7 年前

由于@glennsl的提示,这个问题得到了理想的解决。

import Browser
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (disabled)
import Html.Events exposing (onClick)


main =
    Browser.sandbox
        { init =
            { count = 0
            , added = False
            , inactive = False
            }
        , update = update
        , view = view
        }


type Msg
    = Increment
    | AddNode


update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        AddNode ->
            { model | inactive = True, added = True }


view model =
    let
        viewStatic =
            button
                [ disabled model.inactive
                , onClick AddNode
                ]
                [ text "new" ]

        viewDynamic =
            div []
                [ text (String.fromInt model.count) ]
    in
    div []
        [ viewStatic
        , if model.added then
            div []
                [ button [ onClick Increment ] [ text "+" ]
                , viewDynamic
                ]

          else
            text ""
        ]