Elm-메시지

메시지는 Elm 아키텍처의 구성 요소입니다. 이러한 구성 요소는 사용자와 애플리케이션 인터페이스의 상호 작용에 대한 응답으로 View에서 생성됩니다. 메시지는 응용 프로그램의 상태를 변경하라는 사용자 요청을 나타냅니다.

통사론

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

삽화

다음 예는 간단한 카운터 응용 프로그램입니다. 응용 프로그램은 사용자가 각각 추가 및 빼기 버튼을 클릭 할 때 변수 값을 1 씩 증가 및 감소시킵니다.

응용 프로그램에는 4 개의 구성 요소가 있습니다. 구성 요소는 아래에 설명되어 있습니다.

메시지

이 예의 메시지는 다음과 같습니다.

type Message = Add | Subtract

모델

모델은 애플리케이션의 상태를 나타냅니다. 카운터 애플리케이션에서 모델 정의는 다음과 같습니다. 카운터의 초기 상태는 0이됩니다.

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 "+"]
]

함께 모아서

Step 1− MessagesApp 폴더를 만들고 MessagesDemo.elm 파일을 만듭니다.

Step 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
   }

Step 3 − 실행 elm make command터미널에서. 그만큼elm make command 코드를 컴파일하고 위에서 만든 .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

Step 4 − 열기 index.html 다음과 같이 작동하는지 확인하십시오.