0

尝试在我的 Elm 应用程序中使用 CodeMirror。

update我从这样的函数绑定一个textarea ：

( ..., 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 与不可见的 textarea 或 MutationObserver API 绑定。

有没有更好的办法？

4

2 回答 2

1

您可以使用 DOM突变观察器来监视 DOM 中的更改并在这些事件触发时创建 JS 对象，这样您根本不需要使用端口。

ArriveJS为这个功能提供了一个很好的包装器，因此您可以执行以下操作：

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

您可以通过向data-in 元素添加属性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 回答
0

如果您愿意滥用 json 解码器，则可以在元素首次出现在 DOM 中时使用它们来运行代码。我在这里写过这种方法：https ://medium.com/@prozacchiwawa/the-im-stupid-elm-language-nugget-7-8d3efd525e3e#.3hatcdfl3 。否则，MutationObserver 就是要走的路。

于 2016-09-09T04:58:12.760 回答