0

Elm アプリで CodeMirror を使用してみてください。

updateそのような関数からテキストエリアをバインドします：

( ..., runCodemirror textAreaId)

runCodemirrorポートはどこですか：

port runCodemirror : String -> Cmd msg

問題はports.runCodemirror、テキストエリアが DOM に表示される前にイベントが発生することです。

私はそれを解決しようとしsetTimeoutます:

app.ports.runCodemirror.subscribe(
  function (textAreaId) {
    setTimeout(
      function() {
        CodeMirror.fromTextArea(document.getElementById(textAreaId));
      },
      100
    );
  }
);

しかし、それは醜いです。100ms は遅すぎます。点滅が見えます。

私が持っている他のオプション: CodeMirror を非表示のテキストエリアまたは MutationObserver API にバインドします。

より良い方法はありますか？

4

2 に答える 2

1

DOMミューテーション オブザーバーを使用して DOM の変更を監視し、それらのイベントが発生したときに JS オブジェクトを作成することができます。これにより、ポートをまったく使用する必要がなくなります。

ArriveJSはこの機能の優れたラッパーを提供するため、次のようなことができます。

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

data-要素に属性を追加Elmし、JS 側でそれらを読み取ることで、これをさらに進めることができます。

document.arrive(".code-mirror", function() {
  const lineNumbers = this.getAttribute('data-line-numbers') 
  CodeMirror.fromTextArea(this, {
    lineNumbers: lineNumbers
  })
})
于 2016-09-09T13:54:21.583 に答える