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

Question

有没有一种直接的方法来获得 Cmd View 更新后执行？特别是，我试图在 textarea 中重新定位光标。在按下特定键(如回车键)时。在我的 update我有的功能:

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

我的 setCursor端口被调用，相应的 JavaScript 代码调用 textarea的 setSelectionRange功能正常。然后 Elm 调用我的 view更新 textarea 的函数的内容。不幸的是，这抹去了我的光标位置。

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

Answer 1

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

根据我的经验，另一种似乎也有效的替代方法是替换 setTimeout (具有任意间隔)带有 requestAnimationFrame:

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

这将在 view 之后触发也被渲染了。