📅  最后修改于: 2020-11-04 09:05:18             🧑  作者: Mango
消息是Elm体系结构的组成部分。这些组件由View生成,以响应用户与应用程序界面的交互。消息代表用户更改应用程序状态的请求。
--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN
以下示例是一个简单的计数器应用程序。当用户分别单击“添加”和“减”按钮时,应用程序将变量的值增加或减少1。
该应用程序将包含4个组件。组件描述如下-
此示例的消息将是-
type Message = Add | Subtract
该模型表示应用程序的状态。在反申请中,模型定义如下:计数器的初始状态将为零。
model = 0
该视图表示应用程序的视觉元素。该视图包含两个按钮(+)和(-)。当用户分别单击+和-按钮时,由视图生成消息“添加”和“减去”。然后,视图将显示模型的修改后的值。
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并验证工作原理,如下所示-