Elm - Tin nhắn

Thông báo là một thành phần trong kiến trúc Elm. Các thành phần này do Chế độ xem tạo ra để đáp ứng tương tác của người dùng với giao diện của ứng dụng. Tin nhắn thể hiện các yêu cầu của người dùng để thay đổi trạng thái của ứng dụng.

Cú pháp

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

dục vọng

Ví dụ sau đây là một ứng dụng truy cập đơn giản. Ứng dụng tăng và giảm giá trị của một biến đi 1 khi người dùng nhấp vào các nút Thêm và Trừ tương ứng.

Ứng dụng sẽ có 4 thành phần. Các thành phần được mô tả bên dưới:

Thông điệp

Thông báo cho ví dụ này sẽ là -

type Message = Add | Subtract

Mô hình

Mô hình đại diện cho trạng thái của ứng dụng. Trong ứng dụng bộ đếm, định nghĩa mô hình được đưa ra dưới đây; trạng thái ban đầu của bộ đếm sẽ bằng không.

model = 0

Lượt xem

Chế độ xem đại diện cho các yếu tố trực quan của ứng dụng. Dạng xem chứa hai nút (+) và (-). Thông báo Thêm và Trừ được tạo bởi Chế độ xem khi người dùng nhấp vào nút + và - tương ứng. Giá trị đã sửa đổi của mô hình sau đó được hiển thị bởi Chế độ xem.

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

Cập nhật

Thành phần này chứa mã sẽ được thực thi cho mỗi thông báo được tạo bởi dạng xem. Điều này được hiển thị trong ví dụ dưới đây -

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

Để tất cả chúng cùng nhau

Step 1- Tạo thư mục MessagesApp và tập tin MessagesDemo.elm

Step 2 - Thêm mã sau vào tệp cây du -

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
   }

Step 3 - Thực hiện elm make commandtrong thiết bị đầu cuối. Cácelm make command biên dịch mã và tạo tệp HTML từ tệp .elm đã tạo ở trên.

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

Step 4 - Mở index.html và xác minh hoạt động như hình dưới đây -