MathJax + Ember.js重新渲染问题

Question

我遇到过ember的问题（app在2.6.0上，但似乎也发生在最新版本中）渲染过程及其与MathJax.js库的兼容性。我有一个用于隔离问题的余烬旋转（下面链接），但实际上似乎MathJax对单个文本节点中间出现的内联方程的渲染会破坏ember的重新渲染，因为单个文本节点变成多个文本节点MathJax将内联方程文本转换为其Math元素后，第二个文本节点变为孤立，并在重新渲染时保留在DOM中。

https://ember-twiddle.com/cadfb80d7c90df98353cc3d9900f2b73/1ab7f66c3c6ca4aad15bf443bbe02fbb1f79a0d4?openFiles=controllers.application.js%2C

可能只是因为我将mathjax与ember集成在一起是不正确的，所以如果是这样的话，我会喜欢一些指示。

Answer 1

我能够通过一些有点麻烦的解决方法解决这个问题：

https://ember-twiddle.com/cadfb80d7c90df98353cc3d9900f2b73

问题（正如一些ember核心团队成员所证实的那样）是MathJax如何修改DOM，因为ember无法跟踪它创建的额外节点，因此无法正常清理在重新渲染之后。

要解决这个问题，包含mathjax内容的组件会手动将其元素的innerHTML设置为content触发didRender()时设置的任何属性，从而有效地清除所有DOM由MathJax创建/修改。然后调用MathJax的渲染过程来渲染新渲染内容中的任何公式。

请注意，如果您的内容不包含任何HTML，建议您设置element.innerText而不是element.innerHTML。