elm - 如何通过端口交互来协调渲染(Elm 0.17)

Question

我想将Elm与Javascript库集成在一起，以使Elm动态创建“单元格”(html div)，并且Javascript将带有其id-s并用于执行自定义操作。我想要的顺序是

Elm创建一个单元格(并分配ID)

带有ID的

消息被发送到

端口

Javascript接收消息并执行其操作

这是我一开始就实现它的方式( full source):

port onCellAdded : CellID -> Cmd msg

update : Msg -> Model -> (Model, Cmd Msg)
update message ({cells} as model) =
  case message of

    Push ->
      let
        uid = List.length cells
      in
      ({ model
        | cells = [uid] ++ cells
      }, onCellAdded uid)

问题是另一边的Javascript

var container = document.getElementById('app');
var demoApp = Elm.RenderDemo.embed(container);

demoApp.ports.onCellAdded.subscribe(function(cellID) {
   if(document.getElementById('cell:' + cellID) === null) { window.alert("Cannot find cell " + cellID) }    
});

提示找不到这样的ID。显然，该 View 尚未渲染。

因此，我向Elm应用程序添加了另一个状态( OnCellAdded)，希望流程如下所示:

Elm(在Push上)创建一个单元并请求(Task.perform)一个异步任务OnCellAdded

这里的 View 被渲染为

OnCellAdded被调用，带有id的消息被发送到

端口

Javascript接收消息并执行其操作

实现看起来像这样( diff)( full source):

update message ({cells} as model) =
  case message of

    Push ->
      let
        uid = List.length cells
      in
      ({ model
        | cells = [uid] ++ cells
      }, msgToCmd (OnCellAdded uid))

    OnCellAdded counter ->
      (model, onCellAdded counter)

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

但是仍然在处理 OnCellAdded之后立即处理 Push，而不会在两者之间呈现模型。

我最后一次尝试使用 Update.andThen ( diff)( full source)

Push ->
  let
    uid = List.length cells
  in
  ({ model
    | cells = [uid] ++ cells
  }, Cmd.none)
  |> Update.andThen update (OnCellAdded uid)

仍然不起作用。我需要一些帮助。

Answer 1

自0.17.1以来，没有实现该目标的好方法。

我最推荐的方法是使用setTimeout等待至少60ms或等到下一个requestAnimationFrame

考虑以下示例:

demoApp.ports.onCellAdded.subscribe(function(cellID) {
   setTimeout(function() {
      if(document.getElementById('cell:' + cellID) === null) {
         window.alert("Cannot find cell " + cellID)
      }
   }, 60);
});

有一个功能请求 #19添加一个 Hook ，因此可以知道HTML节点何时在DOM中。

您可以进度 here，很可能会在即将发布的版本中。