Question

在更新视图后，是否有直接的方法让Cmd执行？特别是，我试图在按下特定键（如输入键）的textarea中重新定位光标。在update函数中，我有：

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

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

我需要在在我的JavaScript端口中调用textarea之前更新textarea的内容。任何方法都可以在不诉诸textarea.setSelectionRange()的情况下执行此操作，这可能并不总是有效并且可能在超时内导致闪烁？

Answer 1

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

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

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

这也会在view渲染后触发。

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

1 个答案: