MathJax + Ember.js 重新渲染问题答案

【问题标题】：MathJax + Ember.js Re-rendering issueMathJax + Ember.js 重新渲染问题
【发布时间】：2018-09-27 03:06:55
【问题描述】：

我遇到了 ember 的问题（应用程序在 2.6.0，但似乎也发生在最新版本）渲染过程及其与 MathJax.js 库的兼容性。我有一个 ember twiddle（链接在下面）可以隔离问题，但基本上看起来 MathJax 对发生在单个文本节点中间的内联方程的渲染破坏了 ember 的重新渲染，因为单个文本节点变成了多个文本节点在 MathJax 将内联方程文本转换为其数学元素之后，第二个文本节点成为孤立节点，并在重新渲染后保留在 DOM 中。

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

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

【问题讨论】：

您能否更详细地描述一下您的 twiddle 所需的行为（相对于现有行为）是什么？它似乎对我来说按预期工作（但我不是灰烬专家。）
@PeterKrautzberger 抱歉，忘记更新了。我最终在链接的旋转中解决了这个问题（请参阅下面的答案），这就是它起作用的原因。我在问题仍然存在的修订版中更新了原始问题，并提供了指向 twiddle 的链接。
啊，感谢您的跟进。很高兴看到您可以解决问题。

标签： ember.js mathjax

【解决方案1】：

我能够通过一个有点老套的解决方法来解决这个问题：

https://ember-twiddle.com/cadfb80d7c90df98353cc3d9900f2b73

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

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

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

【讨论】：

是否存在您原始问题中描述的垃圾收集/内存泄漏问题？很长一段时间以来，我一直希望有人能在 ember 中找到 mathjax，这样我们就可以停止使用劣质的 mathjax-server 渲染的 svg。旋转看起来很棒，但考虑到我们不会在这些应用程序中经常重新加载页面以清除 dom ，因此缺少 dom 节点听起来很糟糕。
@nruth 我不能 100% 确定这个解决方案没有内存泄漏，但它正在用于生产应用程序，该应用程序具有相当长的生命周期，没有刷新，用户可能会看到数百个Mathjax 方程。我们还没有真正遇到任何内存问题，所以它似乎工作得很好。