榆木+ Masonry.js

您可以使用Elm中的端口与javascript通信，以便双向发布和订阅事件。让我们构建一个示例，其中以砖石布局显示图像列表，然后单击图像将其删除并触发砖石布局其余图像。

由于Elm应用程序将向javascript发送多种类型的事件，因此我们可以创建一个端口，该端口发送可随后对javascript进行操作的字符串。这些字符串将是我们可以在javascript中解释的命令，以便告诉砌体做某些事情，例如"initialize"和"imageRemoved"。该端口还需要一个邮箱，我们可以从Elm内部向其发送消息。

masonryMailbox : Signal.Mailbox String
masonryMailbox =
  Signal.mailbox ""

port masonryCommands : Signal String
port masonryCommands =
  masonryMailbox.signal

由于您使用StartApp，您可以返回Effects你的update功能，让我们创建一个将邮件发送到该邮箱从两个函数StartApp初始化，并从内部update功能。

sendMasonryCommand : String -> Effects.Effects Action
sendMasonryCommand cmd =
  let
    task =
      Signal.send masonryMailbox.address cmd
        `Task.andThen` \_ -> Task.succeed NoOp
  in
    Effects.task task

您可以"initialize"在StartAppinit函数期间发送命令，如下所示：

init =
  (initialModel, sendMasonryCommand "initialize")

在update函数中，如果有RemoveImage String动作，我们可以向"imageRemove"javascript发送命令：

update action model =
  case action of
    NoOp ->
      (model, Effects.none)
    RemoveImage url ->
      let model' =
        { model
        | images = List.filter ((/=) url) model.images
        , message = "Removing image " ++ url
        }
      in (model', sendMasonryCommand "imageRemoved")

现在，我们需要连接事物的javascript端以侦听这些事件。如果javascript得到了命令"initialize"，那么我们就可以砌砌。如果得到"imageRemoved"命令，我们可以告诉砌筑再次触发布局命令。

var app = Elm.fullscreen(Elm.Main);
app.ports.masonryCommands.subscribe(function(cmd) {
  var $grid = $('.grid')

  if (cmd === "initialize") {
    $grid.masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer'
    });

    $grid.imagesLoaded().progress( function() {
      $grid.masonry();
    });  
  } else if (cmd === "imageRemoved") {
    $grid.masonry();
  }
});

我们还可以连接端口以将事件发送回Elm。让我们添加示例，每次砌体完成渲染时都向Elm发送一条消息。首先，我们将创建一个名为的端口setMessage。

port setMessage : Signal String

由于这是javascript将发布到的端口，因此我们仅在Elm中定义函数签名，而不是函数本身。相反，当我们调用时，必须从javascript端为信号提供一个初始值Elm.fullscreen()。javascript更改为：

var app = Elm.fullscreen(Elm.Main, { setMessage: "" });

现在，在处理该"initialize"命令的javascript块中，您可以连接砌体的layoutComplete功能，以向该新端口发送消息。

$grid.on("layoutComplete", function() {
  app.ports.setMessage.send("Masonry layout complete!");
});

为了从setMessageElm中的端口使用这些消息，您需要执行一个SetMessage String操作，并且需要在StartApp inputs列表中映射信号。您的StartApp初始化代码如下所示：

app =
  StartApp.start
    { init = init
    , view = view
    , update = update
    , inputs = [ Signal.map SetMessage setMessage ]
    }

我在几个要点中提供了所有这些的完整工作示例。这是包含Elm代码的要点，这是包含html和javascript的要点。