使用端口在Elm中进行渲染

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)))))，但是它仍然围绕端口旋转。