ポートとDOMレンダリング

ElmアプリケーションでCodeMirrorを使用してみてください。ポートとDOMレンダリング

私はそのようなupdate関数からのテキストエリアをバインド：runCodemirrorはポートです

(..., runCodemirror textAreaId)

：テキストエリアはDOMに表示される前に

port runCodemirror : String -> Cmd msg

問題はports.runCodemirror火災というイベントです。

私はsetTimeoutでこれを解決しよう：

を、それは醜いです。 100msが遅すぎる、私は点滅を参照してください。

その他のオプション私は、CodeMirrorを不可視のtextarea APIまたはMutationObserver APIでバインドしています。

良い方法がありますか？

出典

2016-09-09 ztsu

jsonデコーダを悪用している場合は、要素が最初にDOMに表示されたときにコードを実行するために使用できます。私はこのアプローチについてここに書きました：https://medium.com/@prozacchiwawa/the-i-m-stupid-elm-language-nugget-7-8d3efd525e3e#.3hatcdfl3。それ以外の場合は、MutationObserverを使用します。

出典

2016-09-09 04:58:12

DOM mutation observersを使用すると、DOMの変更を監視し、それらのイベントが発生したときにJSオブジェクトを作成して、ポートをまったく使用する必要がなくなります。あなたはElmの要素にdata-属性を追加し、JS側でそれらを読むことによって、これをさらに取ることができ

document.arrive(".code-mirror", function() { 
    CodeMirror.fromTextArea(this) 
})

：

あなたのような何かができるよう

ArriveJSは、この機能の周りに素敵なラッパーを提供します

document.arrive(".code-mirror", function() { 
    const lineNumbers = this.getAttribute('data-line-numbers') 
    CodeMirror.fromTextArea(this, { 
    lineNumbers: lineNumbers 
    }) 
})

出典

2016-09-09 13:54:21 antfx

ポートとDOMレンダリング

答えて

関連する問題