Elm - 訊息

訊息是 Elm 架構中的一個元件。這些元件是由檢視根據使用者與應用程式介面的互動生成的。訊息代表使用者更改應用程式狀態的請求。

語法

--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN

圖示

以下示例是一個簡單的計數器應用程式。當用戶分別點選“加”和“減”按鈕時，應用程式會將變數的值分別加 1 和減 1。

應用程式將包含 4 個元件。元件描述如下：

訊息

此示例的訊息將是：

type Message = Add | Subtract

模型

模型表示應用程式的狀態。在計數器應用程式中，模型定義如下；計數器的初始狀態將為零。

model = 0

檢視

視圖表示應用程式的可視元素。檢視包含兩個按鈕（+）和（-）。當用戶分別點選 + 和 - 按鈕時，檢視會生成 Add 和 Subtract 訊息。然後，檢視顯示模型的修改後的值。

view model =
-- invoke text function
h1[]
[   div[] [text "CounterApp from TutorialsPoint" ]
   ,button[onClick Subtract] [text "-"]
   ,div[][text (toString model)]
   ,button[onClick Add] [text "+"]
]

更新

此元件包含應為檢視生成的每個訊息執行的程式碼。這在下面的示例中顯示：

update msg model =
case msg of
Add -> model+1
Subtract -> model-1

整合在一起

步驟 1 - 建立資料夾 MessagesApp 和檔案 MessagesDemo.elm

步驟 2 - 在 elm 檔案中新增以下程式碼：

import Html exposing (..)
import Html.Events exposing(onClick)

model = 0 -- Defining the Model

--Defining the View

view model =
   h1[]
   [  div[] [text "CounterApp from TutorialsPoint" ]
      ,button[onClick Subtract] [text "-"]
      ,div[][text (toString model)]
      ,button[onClick Add] [text "+"]
   ]

--Defining the Messages

type Message = Add | Subtract

--Defining Update

update msg model =
case msg of
   Add -> model+1
   Subtract -> model-1

-- Define the main method
main =
   beginnerProgram
   {
      model=model
      ,view=view
      ,update=update
   }

步驟 3 - 在終端中執行 elm make 命令。elm make 命令編譯程式碼並從上面建立的 .elm 檔案生成 HTML 檔案。

C:\Users\dell\elm\MessagesApp> elm make .\MessageDemo.elm
Some new packages are needed. Here is the upgrade plan.

   Install:
      elm-lang/core 5.1.1
      elm-lang/html 2.0.0
      elm-lang/virtual-dom 2.0.4

Do you approve of this plan? [Y/n] y
Starting downloads...

   ΓùÅ elm-lang/html 2.0.0
   ΓùÅ elm-lang/virtual-dom 2.0.4

ΓùÅ elm-lang/core 5.1.1
Packages configured successfully!
Success! Compiled 38 modules.
Successfully generated index.html

步驟 4 - 開啟 index.html 並驗證其工作情況，如下所示：