我想在Elm中检查某些元素的位置和尺寸(知道其ID),如果可能的话不使用JS。有用于DOM(http://package.elm-lang.org/packages/debois/elm-dom/latest/DOM)的程序包,但没有用法示例,我对此感到困惑。
了解榆木的本质,我将在模型中将此矩形保留为Maybe (Int, Int, Int, Int)
之类,并可能通过某些订阅或端口对其进行更新。
最简单的方法是什么?
答案 0 :(得分:2)
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(以防您查询多个元素并需要跟踪查询哪个元素)。