Elm开始吧

2024-04-12 01:38:04 497

示例

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trying out ports</title>
  </head>
  <body>
    <div id="app"></div>
    <script xx_src="elm.js"></script>
    <script>
    
      var node = document.getElementById('app');
      var app = Elm.Main.embed(node);
      
      //订阅Elm的消息
      app.ports.toJs.subscribe(function(messageFromElm) {
        alert(messageFromElm);
        //我们可以寄回一些东西
        //app.ports.fromJs.send（'嘿，收到您的信息！JS，真诚的'）;
      });
      
      //等待三秒钟，然后从JS向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("来自JS的最后一条消息： " ++ message)

subscriptions model =
    fromJs GotMessageFromJs

elm-lang/html如果尚未安装软件包，请安装elm-packageinstallelm-lang/html--yes。

使用编译此代码，以便HTML文件找到它。elm-makeMain.elm--yes--outputelm.js

如果一切顺利，您应该可以打开index.html显示“无消息”文本的文件。三秒钟后，JS发送一条消息，Elm得到它，更改其模型，发送一个响应，JS得到它并打开警报。

Elm开始吧

示例

热门推荐

随机推荐