在視圖更新後調用端口在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的內容。不幸的是，這消除了我的光標位置。

我需要爲textarea的內容更新之前在我的JavaScript端口中調用textarea.setSelectionRange()。任何方式做到這一點，而不求助於setTimeout這可能無法正常工作，並可能導致在超時內閃爍？

Answer 1

要做到這一點的標準方法是觸發一個命令，它會在下一個勾號中返回 - 例如Date.now - 然後從該消息中觸發端口命令。保證視圖函數已經運行並且您的文本區域存在。

的替代，這似乎在我的經驗，以及工作，是一個requestAnimationFrame更換setTimeout（以任意的間隔）：

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

這將觸發view之後已經呈現過。