Elm Language
포트 (JS interop)
수색…
통사론
- 느릅 나무 (수신) : 포트 functionName : (값 -> 메시지) -> 서브 메시지
- JS (전송 중) : app.ports.functionName.send (value)
- 느릅 나무 (보내는) : 포트 functionName : args -> Cmd msg
- JS (수신) : app.ports.functionName.subscribe (function (args) {...});
비고
Elm Guide 에서 http://guide.elm-lang.org/interop/javascript.html 을 참조 하여 이러한 예를 이해하도록하십시오.
개요
포트를 사용하는 모듈은 모듈 정의에 port 키워드가 있어야합니다.
port module Main exposing (..)
Html.App.beginnerProgram 은 구독이나 명령 사용을 허용하지 않기 때문에 포트를 사용할 수 없습니다.
포트가 통합되어 Html.App.program 또는 Html.App.programWithFlags 루프를 업데이트합니다.
노트
elm 0.18의 program 및 programWithFlags 는 Html.App 대신 Html 패키지 안에 있습니다.
나가는
보내는 포트는 명령으로 사용되며 사용자가 update 기능에서 반환합니다.
느릅 나무 쪽
나가는 포트 정의 :
port output : () -> Cmd msg
이 예제에서는 빈 터플을 보내어 자바 스크립트 측에서 구독을 트리거합니다.
그렇게하기 위해서 우리는 Elm으로부터 나가는 데이터를 보내기위한 명령을 얻기 위해 인자로 빈 Tuple을 가진 output 함수를 적용해야한다.
update msg model =
case msg of
TriggerOutgoing data ->
( model, output () )
자바 스크립트 측면
응용 프로그램 초기화 :
var root = document.body;
var app = Elm.Main.embed(root);
해당 이름의 포트에 가입하십시오.
app.ports.output.subscribe(function () {
alert('Outgoing message from Elm!');
});
노트
0.17.0 기준으로 initial 상태에서 JavaScript로 즉시 보내는 메시지는 아무 효과가 없습니다.
init : ( Model, Cmd Msg )
init =
( Model 0, output () ) -- Nothing will happen
아래 예에서 해결 방법을 참조하십시오.
들어오는
자바 스크립트에서 들어오는 데이터는 구독을 거치고 있습니다.
느릅 나무 쪽
먼저 다음 구문을 사용하여 들어오는 포트를 정의해야합니다.
port input : (Int -> msg) -> Sub msg
서브 스크립 션이 여러 Sub.batch 경우 Sub.batch 를 사용할 수 있습니다.이 예제에는 input port Subscription 하나만 포함됩니다
subscriptions : Model -> Sub Msg
subscriptions model =
input Get
그런 다음 subscriptions 을 Html.program 에 전달해야합니다.
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
자바 스크립트 측면
응용 프로그램 초기화 :
var root = document.body;
var app = Elm.Main.embed(root);
Elm에게 메시지 보내기 :
var counter = 0;
document.body.addEventListener('click', function () {
counter++;
app.ports.input.send(counter);
});
노트
0.17.0 부터 즉각적인 app.ports.input.send(counter); 앱을 초기화 한 후에는 효과가 없습니다.
시작할 때 필요한 모든 데이터를 Html.programWithFlags 사용하여 Flags로 Html.programWithFlags
0.17.0의 시작시 즉각적인 발신 메시지
데이터가 포함 된 즉각적인 메시지를 JavaScript로 보내려면 init 에서 조치를 트리거해야 init .
init : ( Model, Cmd Msg )
init =
( Model 0, send SendOutgoing )
send : msg -> Cmd msg
send msg =
Task.perform identity identity (Task.succeed msg)
시작하다
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trying out ports</title>
</head>
<body>
<div id="app"></div>
<script src="elm.js"></script>
<script>
var node = document.getElementById('app');
var app = Elm.Main.embed(node);
// subscribe to messages from Elm
app.ports.toJs.subscribe(function(messageFromElm) {
alert(messageFromElm);
// we could send something back by
// app.ports.fromJs.send('Hey, got your message! Sincerely, JS');
});
// wait three seconds and then send a message from JS to Elm
setTimeout(function () {
app.ports.fromJs.send('Hello from JS');
}, 3000);
</script>
</body>
</html>
Main.elm
port module Main exposing (..)
import Html
port toJs : String -> Cmd msg
port fromJs : (String -> msg) -> Sub msg
main =
Html.program
{ init = (Nothing, Cmd.none) -- our model will be the latest message from JS (or Nothing for 'no message yet')
, update = update
, view = view
, subscriptions = subscriptions
}
type Msg
= GotMessageFromJs String
update msg model =
case msg of
GotMessageFromJs message ->
(Just message, toJs "Hello from Elm")
view model =
case model of
Nothing ->
Html.text "No message from JS yet :("
Just message ->
Html.text ("Last message from JS: " ++ message)
subscriptions model =
fromJs GotMessageFromJs
설치 elm-lang/html 당신에 의해 아직있는 경우 패키지를 elm-package install elm-lang/html --yes .
elm-make Main.elm --yes --output elm.js 사용하여이 코드를 컴파일하여 HTML 파일이 찾도록하십시오.
모든 것이 잘 진행되면 "No message"텍스트가 표시된 상태에서 index.html 파일을 열 수 있어야합니다. JS가 3 초 후에 메시지를 보내고, Elm이 메시지를 받고, 모델을 변경하고, 응답을 보내고, JS가 메시지를 보내고 경고 메시지를 엽니 다.