文本字段
我们准备创建一个简单的应用来反转文本字段中的内容。
点击蓝色按钮，在在线编辑器中查看该程序。试着查看 type 关键字的提示。立即点击蓝色按钮！
import Browser
import Html exposing (Html, Attribute, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model =
{ content : String
}
init : Model
init =
{ content = "" }
-- UPDATE
type Msg
= Change String
update : Msg -> Model -> Model
update msg model =
case msg of
Change newContent ->
{ model | content = newContent }
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
, div [] [ text (String.reverse model.content) ]
]
此代码与前一个示例略有不同。您设置了一个模型。您定义了一些消息。您说明如何进行 update。您可以据此创建您的 view。区别仅在于我们如何填充此框架。我们来了解一下！
模型
我总是从猜测我的 Model 应该是什么开始。我们知道必须跟踪用户在文本字段中键入的任何内容。我们需要此信息才可了解如何呈现反转后的文本。因此，我们选择了这个
type alias Model =
{ content : String
}
这次，我选择将模型表示为一个记录。该记录在 content 字段中存储用户输入。
注意：您可能想知道，如果记录仅包含一项，为何还要使用它？不能直接使用字符串吗？当然可以！但从一条记录开始可以很容易地在我们的应用变得更复杂时添加更多字段。当我们需要 两个 文本输入时，我们只需进行较少的修正。
视图
我们有了我们的模型，所以我通常会继续创建一个 view 函数
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
, div [] [ text (String.reverse model.content) ]
]
我们创建了一个带有两个子级的 <div>。有趣的子级是具有三个属性的 <input> 节点
placeholder是在没有内容时显示的文本value是此<input>的当前内容onInput在用户在此<input>节点中键入时发送消息
键入“bard”，将生成四条消息
更改“b”更改“ba”更改“bar”更改“bard”
这些消息将馈送到我们的 update 函数。
更新
此程序中只有一种类型消息，因此我们的update只需要处理一种情况
type Msg
= Change String
update : Msg -> Model -> Model
update msg model =
case msg of
Change newContent ->
{ model | content = newContent }
当我们接收到一个<input>节点已改变的消息后，我们更新了这个模型的content。因此，如果你输入“bard”，则产生的消息会产生以下模型
{ content = "b" }{ content = "ba" }{ content = "bar" }{ content = "bard" }
我们必须显式地在我们的模型中跟踪这些信息，否则无法在我们的view函数中显示反向文本！
练习：转到在线编辑器中的该示例 here 并在你的
view函数中显示content的长度。请使用String.length！