如何在Elm中通过id检查元素矩形

Question

如果可能的话，我想检查Elm中某个元素(知道其id(的位置和维度，而不使用JS。DOM有包(http://package.elm-lang.org/packages/debois/elm-dom/latest/DOM)，但没有用法的例子，我对此感到困惑。

了解Elm的本质，我会在我的模型中保留这个矩形作为类似Maybe (Int, Int, Int, Int)的东西，并可能通过一些订阅或端口进行更新。

实现它最简单的方法是什么？

Answer 1

debois/elm-dom包只会向您提供有关当前事件的信息(例如，您可以单击一个按钮并查看其维度(。如果您想获得给定ID的任意DOM元素的信息，则必须使用端口。

这是经过设计的：任何时候你需要查询DOM，你都不再是Elm的纯净；您正在查询有副作用的内容，需要通过Cmd和Sub端口才能允许自定义javascript。您将需要两个端口：一个将请求发送到DOM，另一个将结果从javascript返回到Elm。

port fetchBoundingClientRect : Id -> Cmd msg
port setBoundingClientRect : (Maybe BoundingClientRect -> msg) -> Sub msg

您的javascript可能看起来像这样：

var app = Elm.Main.embed(document.querySelector('main'))
app.ports.fetchBoundingClientRect.subscribe(function(id) {
var entity = document.getElementById(id);
app.ports.setBoundingClientRect.send(entity ? entity.getBoundingClientRect() : null);
});

这只是一个简化的例子。你可以在ellie-app.com上看到它。在现实世界中，你可能想保留更多信息，比如在传入订阅中包含元素的ID(以防你查询多个元素，并需要跟踪查询的是哪个元素(。