Elm Language
पोर्ट (जेएस इंटरॉप)
खोज…
वाक्य - विन्यास
- एल्म (प्राप्त करना): पोर्ट फ़ंक्शननाम: (मान -> संदेश) -> उप संदेश
- JS (भेजना): app.ports.functionName.send (मान)
- एल्म (भेजना): पोर्ट फंक्शननाम: args -> Cmd msg
- JS (प्राप्त करना): app.ports.functionName.subscribe (फ़ंक्शन (args) {...});
टिप्पणियों
इन उदाहरणों को समझने में सहायता करने के लिए एल्म गाइड से http://guide.elm-lang.org/interop/javascript.html से परामर्श करें।
अवलोकन
एक मॉड्यूल, जो पोर्ट का उपयोग कर रहा है, उसमें मॉड्यूल की परिभाषा में port कीवर्ड होना चाहिए।
port module Main exposing (..)
Html.App.beginnerProgram साथ बंदरगाहों का उपयोग करना असंभव है, क्योंकि यह सब्सक्रिप्शन या कमांड का उपयोग करने की अनुमति नहीं देता है।
पोर्ट्स को Html.App.program या Html.App.programWithFlags लूप को अपडेट करने के लिए एकीकृत किया गया है।
ध्यान दें
program और program programWithFlags एल्म 0.18 में Html.App बजाय पैकेज Html अंदर हैं।
निवर्तमान
आउटगोइंग पोर्ट्स को कमांड्स के रूप में उपयोग किया जाता है, जिसे आप अपने update फ़ंक्शन से वापस करते हैं।
एल्म पक्ष
आउटगोइंग पोर्ट को परिभाषित करें:
port output : () -> Cmd msg
इस उदाहरण में, हम एक खाली 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 राज्य से जावास्क्रिप्ट पर तत्काल आउटगोइंग संदेश का कोई प्रभाव नहीं होगा।
init : ( Model, Cmd Msg )
init =
( Model 0, output () ) -- Nothing will happen
नीचे दिए गए उदाहरण में वर्कअराउंड देखें।
आने वाली
जावास्क्रिप्ट से आने वाला डेटा सब्सक्रिप्शन से गुजर रहा है।
एल्म पक्ष
पहले, हमें निम्नलिखित सिंटैक्स का उपयोग करके एक आने वाले पोर्ट को परिभाषित करने की आवश्यकता है:
port input : (Int -> msg) -> Sub msg
यदि हम कई सदस्यताएँ हैं, तो हम Sub.batch उपयोग कर सकते हैं, इस उदाहरण में input port केवल एक सदस्यता होगी
subscriptions : Model -> Sub Msg
subscriptions model =
input Get
फिर आपको अपने Html.program के subscriptions को पास करना होगा:
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
जावास्क्रिप्ट पक्ष
आवेदन को प्रारंभ करें:
var root = document.body;
var app = Elm.Main.embed(root);
एल्म को संदेश भेजें:
var counter = 0;
document.body.addEventListener('click', function () {
counter++;
app.ports.input.send(counter);
});
ध्यान दें
कृपया ध्यान दें कि के रूप में 0.17.0 तत्काल app.ports.input.send(counter); एप्लिकेशन के बाद आरंभीकरण का कोई प्रभाव नहीं होगा!
Html.programWithFlags का उपयोग करके फ़्लैग के रूप में स्टार्ट-अप के लिए सभी आवश्यक डेटा पास करें
0.17.0 में स्टार्ट-अप पर तत्काल आउटगोइंग संदेश
जावास्क्रिप्ट के साथ डेटा के लिए एक तत्काल संदेश भेजने के लिए, आपको अपने 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 फ़ाइल उसे मिल जाए।
यदि सबकुछ ठीक हो जाता है, तो आपको प्रदर्शित "नो मैसेज" टेक्स्ट के साथ index.html फ़ाइल खोलने में सक्षम होना चाहिए। तीन सेकंड के बाद जेएस एक संदेश भेजता है, एल्म इसे प्राप्त करता है, अपना मॉडल बदलता है, एक प्रतिक्रिया भेजता है, जेएस इसे प्राप्त करता है और एक अलर्ट खोलता है।