Javascript 连接端口和订阅时出现问题

我正在阅读和他们的JavaScript互操作。以下是一个简化版本：

port module FooBar exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.App as Html
import String

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

-- subscriptions
port f : () -> Cmd msg
port g : ( Int -> msg ) -> Sub msg

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

-- MODEL
type alias Model = { pt :  Int }

-- VIEW
view: Model -> Html Msg
view model = Html.text ( toString model.pt )

-- UPDATE
type Msg = Ask | Get Int

update: Msg -> Model -> (Model, Cmd msg)
update msg model =
  case msg of
    Ask  -> (model, f () )
    Get x -> ( Model x, Cmd.none )

-- INIT
init: (Model, Cmd Msg)
init = ( Model 0, f ())

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

应用程序最初设置为0，但它应该从JavaScript读取消息并设置为1。但是，它仍然保持在0。Elm端口设置是否正确

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

var节点=document.getElementById（“foobar”）；
var app=Elm.FooBar.embed（节点）；
app.ports.f.订阅(
函数（）{
var-myValue=1；
console.log（myValue）；
app.ports.g.send（myValue）；
}
);

我在这里写了：

elm make foo.elm--output=foo.js

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

---

myValue

作为1打印到控制台这一事实表明调用了

f（）

端口，但

g（）

端口从未被发送回或正确处理。

很难说这是否是一个设计决策，但

init

在

Html之前被调用。App

订阅了任何端口

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

因此，从

init

调用

f（）

将无效

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

我使用

send

函数，它运行一个虚拟任务，并始终发送

Ask

消息，这将触发传出端口

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

考虑更改

init

以发送消息，将数据发送到端口：

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

-- INIT


init : ( Model, Cmd Msg )
init =
    -- ( Model 0, f ())
    ( Model 0, send Ask )


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

---

如果您只是希望将默认值从Javascript发送到Elm应用程序，则可以使用，无需尝试连接到尚未设置的端口：

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

main=
Html.programWithFlags
{init=init
，视图=视图
，update=update
，订阅=订阅
}
--初始化
类型别名标志={initialValue:Int}
初始化：标志->（型号，Cmd Msg）
初始化标志=（Model flags.initialValue，Cmd.none）

这允许您通过Javascript发送初始值，如下所示：

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      console.log(myValue);
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

var-app=Elm.FooBar.embed（节点，{initialValue:2}）；

我对Elm了解不够，无法做出“设计决策”。。。哦，这是Elm 0.17，所以可能有语法更改我检查过了

f

肯定会被调用。我尝试使用

控制台.log

@johnmangual我指的是

Html.app

初始化的执行顺序。上的文档尚未启动-谢谢。