4

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

4

1 回答 1

6

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

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

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

这也将在view渲染后触发。

于 2017-06-09T18:21:11.193 回答