从输入设置模型值？

Question

我正在尝试使用 Elm 制作待办事项列表，但在弄清楚如何从输入中设置值以将其添加到模型中的列表时遇到问题：

module ToDoList exposing (..)
import Browser
import Html exposing (Html, div, text, li, button, ul, input)
import Html.Events exposing (onClick)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


type alias Model = List String

type Msg =
 NewTask String


init : Model
init = ["Premade Task"]
type alias AddToDo =
    { newTask : String
    , status: String }

update : Msg -> Model -> Model
update msg model =
    case msg of
        NewTask newContent ->
            model ++ [newContent]

view : Model -> Html Msg
view model =
    div [] [
        input [ placeholder "New Task", value model.content, onInput NewTask ] []
        , button [ onClick <| (NewTask model.content) ] [text "Add a task"]
        , ul [] (List.map viewTodo model)
      ]
viewTodo todo =
    li [] [text todo]

main =
    Browser.sandbox { init = init, update = update, view = view }

我尝试将 Model 设为元组，但没有成功，实现这一点的正确方法是什么，我只需要从输入中获取值并将其添加到列表中，然后单击“添加任务”按钮。

Answer 1

在添加到集合之前，您需要一种方法来临时存储正在键入的待办事项。在以下示例中，我在Model 上引入了draft 字段。我还引入了一个新的消息类型DraftTask，只要用户输入，它就会被发送。当他们点击按钮时，程序会将draft 值附加到todos 列表中。

module ToDoList exposing (..)

import Browser
import Html exposing (Html, button, div, input, li, text, ul)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)


type alias Model =
    { todos : List String
    , draft : String
    }


type Msg
    = NewTask
    | DraftTask String


init : Model
init =
    { todos = [ "Premade Task" ]
    , draft = ""
    }


update : Msg -> Model -> Model
update msg model =
    case msg of
        NewTask ->
            { model
                | todos = model.todos ++ [model.draft]
                , draft = ""
            }

        DraftTask s ->
            { model | draft = s }


view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "New Task", value model.draft, onInput DraftTask ] []
        , button [ onClick <| NewTask ] [ text "Add a task" ]
        , ul [] (List.map viewTodo model.todos)
        ]


viewTodo todo =
    li [] [ text todo ]


main =
    Browser.sandbox { init = init, update = update, view = view }