Elm Language
Poorten (JS interop)

CSS F# Haskell Language HTML JavaScript Node.js React Regular Expressions Ruby on Rails SVG
Zoeken…


Syntaxis

  • Elm (ontvangen): poort functionName: (waarde -> msg) -> Sub msg
  • JS (verzenden): app.ports.functionName.send (waarde)
  • Elm (verzenden): poort functionName: args -> Cmd msg
  • JS (ontvangen): app.ports.functionName.subscribe (function (args) {...});

Opmerkingen

Raadpleeg http://guide.elm-lang.org/interop/javascript.html in The Elm Guide voor meer informatie over deze voorbeelden.

Overzicht

Een module, die gebruik maken van havens moeten port zoekwoord in zijn module definitie. 

port module Main exposing (..)

Het is onmogelijk om poorten te gebruiken met Html.App.beginnerProgram , omdat het niet is toegestaan om Abonnementen of Opdrachten te gebruiken.

Poorten zijn geïntegreerd om de lus van Html.App.program of Html.App.programWithFlags bij te werken.

Notitie

program en programWithFlags in elm 0.18 bevinden zich in het pakket Html plaats van Html.App .

uitgaande

Uitgaande poorten worden gebruikt als opdrachten, die u terugkeert vanuit uw update .

Elm kant

Definieer uitgaande poort: 

port output : () -> Cmd msg

In dit voorbeeld sturen we een lege Tuple, gewoon om een abonnement aan de JavaScript-kant te activeren.

Om dit te doen, moeten we de output toepassen met een lege Tuple als argument, om een opdracht te krijgen voor het verzenden van de uitgaande gegevens van Elm. 

update msg model =
    case msg of
        TriggerOutgoing data ->
            ( model, output () )

JavaScript-zijde

Initialiseer de applicatie: 

var root = document.body;
var app = Elm.Main.embed(root);

Abonneer u op een poort met een bijbehorende naam: 

app.ports.output.subscribe(function () {
    alert('Outgoing message from Elm!');
});

Notitie

Vanaf 0.17.0 heeft een onmiddellijk uitgaand bericht naar JavaScript vanuit uw initial staat geen effect. 

init : ( Model, Cmd Msg )
init =
    ( Model 0, output () ) -- Nothing will happen

Zie de oplossing in het onderstaande voorbeeld.

inkomend

Inkomende gegevens van JavaScript verlopen via Abonnementen.

Elm kant

Eerst moeten we een binnenkomende poort definiëren met behulp van de volgende syntaxis: 

port input : (Int -> msg) -> Sub msg

We kunnen Sub.batch als we meerdere abonnementen hebben, dit voorbeeld bevat slechts één abonnement voor input port 

subscriptions : Model -> Sub Msg
subscriptions model =
    input Get

Vervolgens moet u de subscriptions doorgeven aan uw Html.program : 

main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

JavaScript-zijde

Initialiseer de applicatie: 

var root = document.body;
var app = Elm.Main.embed(root);

Stuur het bericht naar Elm: 

var counter = 0;
        
document.body.addEventListener('click', function () {
    counter++;
    app.ports.input.send(counter);
});

Notitie

Merk op dat vanaf 0.17.0 de onmiddellijke app.ports.input.send(counter); na initialisatie van de app heeft geen effect!

Geef alle vereiste gegevens voor het opstarten door als vlaggen met behulp van Html.programWithFlags

Direct uitgaand bericht bij opstarten in 0.17.0

Om een onmiddellijk bericht met gegevens naar JavaScript te verzenden, moet u een actie van uw init activeren. 

init : ( Model, Cmd Msg )
init =
    ( Model 0, send SendOutgoing )


send : msg -> Cmd msg
send msg =
    Task.perform identity identity (Task.succeed msg)

Begin

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

Installeer het elm-lang/html pakket als u dat nog niet hebt gedaan door elm-package install elm-lang/html --yes .

Compileer deze code met elm-make Main.elm --yes --output elm.js zodat het HTML-bestand het vindt.

Als alles goed gaat, moet u het bestand index.html kunnen openen met de tekst "Geen bericht". Na drie seconden stuurt de JS een bericht, Elm krijgt het, verandert zijn model, stuurt een antwoord, JS krijgt het en opent een waarschuwing.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow