使用端口在Elm中进行渲染

 2021-04-26 

Use ports for rendering in elm

我想使用elm的flot.js 2D图库。我最初以为我会为此编写一个本机package,但是似乎不建议这样做。因此,我想尝试使用端口发送值以将其绘制到JavaScript(即,对flot.js的调用将在JavaScript端进行)。这可能吗?


是的,您可以使用端口从Elm发送数据以将其绘制到Flot图形中。这是使用Elm作为数据源的Basic Flot示例的重写。

1
2
3
4
5
6
7
8
9
10
11
12
13
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)

1
2
3
4
5
        var app = Elm.worker(Elm.Main);

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

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


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