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

Question

Cmd更新视图后，有没有一种直接执行方法的方法？特别是，我试图textarea在按下特定键（例如Enter键）时将光标重新定位在上。在我的update职能中，我有：

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

我的setCursor端口被调用，相应的JavaScript代码正确调用textarea的setSelectionRange功能。而随后榆树叫我的view功能，更新textarea的内容。不幸的是，这抹去了我的光标位置。

我需要的textarea的内容进行更新之前打电话textarea.setSelectionRange()在我的JavaScript端口。有什么方法可以执行此操作而不求助于setTimeout哪一种方法可能并不总是有效，并且可能在超时时间内导致闪烁？

Answer 1

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

根据我的经验，另一种方法似乎也能正常工作，就是setTimeout用requestAnimationFrame 替换（具有任意间隔）：

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

也会在view渲染后触发。