elm - 在 Elm 中更新视图后调用端口

Question

Cmd视图更新后是否有直接执行的方法？特别是，我试图在textarea按下特定键（如回车键）时将光标重新定位。在我的update功能中，我有：

case keyboardEvent.key of
    "Enter" ->
        ( modelAfterEnterPressed model keyboardEvent.selectionStart, setCursor model.cursor )
    "Tab" ->
        ....

我的setCursor端口被调用，相应的 JavaScript 代码正确调用了textarea'setSelectionRange函数。然后Elm 调用我的函数来view更新textarea's 的内容。不幸的是，这消除了我的光标位置。

在调用我的 JavaScript 端口之前，我需要textarea更新 的内容。有什么方法可以做到这一点而不诉诸哪一种方法可能并不总是有效，并且会在超时内导致闪烁？textarea.setSelectionRange()setTimeout

Answer 1

执行此操作的标准方法是触发在下一个滴答声中返回的命令 - 例如 Date.now - 然后从该消息触发端口命令。这保证了视图功能将运行并且您的文本区域存在。

根据我的经验，另一种似乎也有效的替代方法是setTimeout用 requestAnimationFrame 替换 a（具有任意间隔）：

elm.ports.selectText.subscribe( () => {
  requestAnimationFrame( () => {
    var textarea = document.querySelector(...);
    textarea.setSelectionRange();
  });
});

这也将在view渲染后触发。