端口和DOM呈现

Question

尝试在我的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与不可见的文本区域或MutationObserver API。

有更好的方法吗?

Answer 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
  })
})

Answer 2

如果你愿意滥用json解码器，你可以使用它们在元素首次出现在DOM中时运行代码。我在这里写了关于这种方法的文章:https://medium.com/@prozacchiwawa/the- I -m-stupid-elm- languagenugget -7-8d3efd525e3e#.3hatcdfl3。否则，MutationObserver就是最好的选择。