在 elm 中使用端口进行渲染答案

【问题标题】：Use ports for rendering in elm在 elm 中使用端口进行渲染
【发布时间】：2016-01-06 05:30:46
【问题描述】：

我想使用 elm 的 flot.js 2D 绘图库。我一开始以为我会为它写一个本地包装器，但似乎不鼓励。因此，我想尝试使用端口将要绘制的值发送到 JavaScript（即，对 flot.js 的调用将在 JavaScript 端进行）。这可能吗？

【问题讨论】：

标签： elm

【解决方案1】：

是的，您可以使用端口从 Elm 发送数据以绘制到 Flot 图中。这是使用 Elm 作为数据源对 Basic Flot Example 的重写。

port flotExample1 : List (List (Maybe (List Float)))
port flotExample1 =
  let
    halfStepsTo14 =
      List.map (\x -> x / 2) [0..28]
    d1 =
      List.map (\x -> Just [x, sin x]) halfStepsTo14
    d2 =
      List.map Just [[0, 3], [4, 8], [8, 5], [9, 13]]
    d3 =
      [Just [0, 12], Just [7, 12], Nothing, Just [7, 2.5], Just [12, 2.5]]
  in
    [ d1, d2, d3 ]

Elm 会将端口中的基本 Elm 数据类型转换为另一端的 Javascript 类型。上面函数签名中的Maybe 是为了说明在Flot 中可以使用空值来分隔线段（参见示例d3）

    <script>
        var app = Elm.worker(Elm.Main);

        $(function() {
            $.plot("#placeholder", app.ports.flotExample1);
        });
    </script>

您可以制作更复杂的示例，例如从 Elm 访问服务器 URL 或绑定其他信号，例如时间或鼠标移动（在这种情况下，您的端口签名将是 Signal (List (List (Maybe (List Float))))），但它仍然会围绕端口进行。

【讨论】：

我选择了您的答案，因为它看起来更惯用。但是，是什么阻止我们创建 Signal String 类型的“eval”端口并在脚本标签内对其运行 eval？我很确定 Evan Czaplicki 会被吓坏的……
当然，您可以创建一个eval() 端口订阅者并在elm 中连接JavaScript 字符串，但这有点违背了使用elm 的初衷。端口的边界层提供了任何 JavaScript 和类型安全的纯 elm 代码的清晰分离。我认为您会在尝试通过生成用于评估的 JavaScript 字符串来模糊这条线。
我就是这么想的。我想这样做是一种快速而肮脏的黑客攻击，以使用现有的 JavaScript 库，例如 flot.js，因为原生模块看起来就像是一个让你自己开枪的秘诀......

【解决方案2】：

我不明白为什么不。您可以在 elm 中构建一个数据结构，其中包含您对 flot.js 的指令（或者在您的情况下可能只是一个点数组），然后通过端口将该组指令传递给 javascript。然后在 javascript 中处理指令并调用 flot.js。

【讨论】：