Elm Language
Porty (interakcja JS)

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


Składnia

  • Elm (odbieranie): nazwa funkcji portu: (wartość -> msg) -> Sub msg
  • JS (wysyłanie): app.ports.functionName.send (wartość)
  • Elm (wysyłanie): port nazwa funkcji: args -> Cmd msg
  • JS (odbieranie): app.ports.functionName.subscribe (function (args) {...});

Uwagi

Zapoznaj się z http://guide.elm-lang.org/interop/javascript.html z Przewodnika wiązów, aby pomóc w zrozumieniu tych przykładów.

Przegląd

Moduł korzystający z portów powinien mieć słowo kluczowe port w definicji modułu. 

port module Main exposing (..)

Nie można używać portów z Html.App.beginnerProgram , ponieważ nie pozwala na korzystanie z subskrypcji ani poleceń.

Porty są zintegrowane w celu aktualizacji pętli Html.App.program lub Html.App.programWithFlags .

Uwaga

program i programWithFlags w wiąz 0,18 znajdują się w pakiecie Html zamiast Html.App .

Towarzyski

Porty wychodzące są używane jako polecenia zwracane z funkcji update .

Strona wiązu

Zdefiniuj port wychodzący: 

port output : () -> Cmd msg

W tym przykładzie wysyłamy pustą krotkę, aby wywołać subskrypcję po stronie JavaScript.

Aby to zrobić, musimy zastosować funkcję output z pustym argumentem Tuple jako argumentem, aby otrzymać polecenie wysyłania wychodzących danych z Wiązu. 

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

Strona JavaScript

Zainicjuj aplikację: 

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

Subskrybuj port o odpowiedniej nazwie: 

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

Uwaga

Począwszy od wersji 0.17.0 , natychmiastowa wiadomość wychodząca na JavaScript z twojego stanu initial będzie działać. 

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

Zobacz obejście w poniższym przykładzie.

Przychodzący

Przychodzące dane z JavaScript przechodzą przez subskrypcje.

Strona wiązu

Najpierw musimy zdefiniować port przychodzący, używając następującej składni: 

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

Możemy użyć Sub.batch jeśli mamy wiele subskrypcji, ten przykład będzie zawierał tylko jedną subskrypcję do input port 

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

Następnie musisz przekazać subscriptions do swojego programu Html.program : 

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

Strona JavaScript

Zainicjuj aplikację: 

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

Wyślij wiadomość do Elm: 

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

Uwaga

Należy pamiętać, że od 0.17.0 natychmiastowy app.ports.input.send(counter); po inicjalizacji aplikacji nie przyniesie żadnego efektu!

Przekaż wszystkie wymagane dane do uruchomienia jako Flagi, używając Html.programWithFlags

Natychmiastowa wiadomość wychodząca przy uruchomieniu w 0.17.0

Aby wysłać natychmiastową wiadomość z danymi do JavaScript, musisz zainicjować akcję ze swojego init . 

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


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

Zaczynaj

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

Zainstaluj pakiet elm-lang/html , jeśli jeszcze tego nie zrobiłeś, elm-package install elm-lang/html --yes .

Skompiluj ten kod używając elm-make Main.elm --yes --output elm.js aby plik HTML go znalazł.

Jeśli wszystko pójdzie dobrze, powinieneś być w stanie otworzyć plik index.html z wyświetlonym tekstem „Brak wiadomości”. Po trzech sekundach JS wysyła wiadomość, Elm ją otrzymuje, zmienia swój model, wysyła odpowiedź, JS ją otrzymuje i otwiera alert.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow