按钮

我们第一个示例是一个可以递增或递减的计数器。

我在下面包含了完整程序。点击蓝色的“编辑”按钮，可以在在线编辑器中对其进行修改。尝试更改其中一个按钮上的文本。现在就点击蓝色按钮！

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



-- MAIN


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



-- MODEL

type alias Model = Int

init : Model
init =
  0


-- UPDATE

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1


-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

现在你已经对代码进行了简单了解，可能有一些疑问。main 值在做什么？不同的部分是如何组合在一起的？让我们浏览代码并讨论一下。

注意：此处代码使用了 类型注释、类型别名 和 自定义类型。本节的目的是让你了解 Elm 架构，所以我们稍后才会介绍它们。如果你在这些方面遇到困难，我鼓励你提前预览一下！

Main

main 值在 Elm 中很特殊。它描述了在屏幕上显示的内容。在这种情况下，我们将使用 init 值初始化我们的应用程序，view 函数将在屏幕上显示所有内容，而用户输入将被输入到 update 函数中。可以将其视为我们程序的高级描述。

模型

数据建模在 Elm 中极其重要。**模型**的目的是将有关应用程序的所有详细信息作为数据捕获下来。

要制作一个计数器，我们需要跟踪一个正在增减的数字。这意味着我们的模型这次真的很小

type alias Model = Int

我们只需要一个 Int 值来跟踪当前计数。我们可以在初始值中看到

init : Model
init =
  0

初始值为零，它会随着人们按下不同的按钮而增加或减少。

视图

我们有一个模型，但我们如何在屏幕上显示它？这就是 view 函数的作用

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

此函数以 Model 作为参数。它输出HTML。所以我们说我们要显示一个减按钮、当前计数和一个增按钮。

请注意，每个按钮都有一个 onClick 处理程序。这些意思是：当某人单击时，生成一条消息。所以加号按钮生成一条 Increment 消息。那是什么，它去哪里？去 update 函数！

更新

update 函数描述了我们的 Model 如何随着时间推移而改变。

我们定义它可能接收的两个消息

type Msg = Increment | Decrement

从那里，update 函数只是描述了在接收到这些消息时该做什么。

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

如果您收到一条 Increment 消息，您就对模型进行递增。如果您收到一条 Decrement 消息，您就对模型进行递减。

因此，每当我们收到一条消息时，我们就通过 update 运行它来获取一个新模型。然后我们调用 view 来弄清楚如何在屏幕上显示新模型。然后重复！用户输入生成一条消息，update 模型，在屏幕上 view 它。等等。

概述

现在您已经看到了 Elm 程序的所有部分，可能更容易明白它们如何适应我们之前看到的图表

Elm 首先通过在屏幕上呈现初始值来开始。从那里你进入这个循环

1. 等待用户输入。
2. 向 update 发送一条消息
3. 生成一个新的 Model
4. 调用 view 以获取新的 HTML
5. 在屏幕上显示新的 HTML
6. 重复！

这就是 Elm 架构的本质。我们今后看到的每个示例都将稍稍改变这个基本模式。

练习： 添加一个按钮将计数器重置为零

1. 向 Msg 类型添加一个 Reset 变体
2. 在 update 函数中添加一个 Reset 分支
3. 在 view 函数中添加一个按钮。

您可以在 此处 的在线编辑器中编辑示例。

如果进行顺利，请尝试添加另一个按钮以按步长 10 进行递增。