Question

我正在努力让ractive.js动态更新MathJax。

现在我知道您可以使用以下命令触发MathJax重新加载：

MathJax.Hub.Queue.Push(["Typeset",MathJax.Hub]);

所以我把它绑定到了观察回调：

  ractive.observe('input', function (input) {
    ractive.set('output', input * 2);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  });

但是当我尝试使用\begin{equation} {{output}} \end{equation}渲染MathJax时它保持在初始值。

testcase

奇怪的是，确实获得了初始值，而不是更新。

有什么想法吗？

编辑：它似乎添加了一大堆嵌套的MathJax_MathContainer元素，每个元素出现一次。

JsFiddle demo with Peter Krautzberger's suggestion - 似乎仍无效

Answer 1

问题是MathJax从DOM中删除了元素，因此Ractive无法再更新它们。这可以通过使用MathJax搜索（例如$$）将LaTeX包装在<script type="math/tex; mode=display" id="foo">元素中来解决。这将阻止替换，因为MathJax可以在内部处理脚本元素。

现在您可以观察变量并使用MathJax.Hub.Queue(["Typeset",MathJax.Hub, "foo"]);

触发重绘

非常感谢Peter Krautzberger提出建议/解决方案。

Answer 2

@wrongusername我没有任何Ractive经验，大约3年前我只使用过MathJax，但我尝试过Reprocess而不是Typeset，这很有用。我认为您应该使用Reprocess，因为您的输入已更改。来自documentation，它说

从文档或DOM元素中删除任何排版数学（或元素，如果它是一个元素数组），然后处理再次数学，重新排版一切。

请在此处查看更新的JSFiddle。

您只需要替换

MathJax.Hub.Queue(["Typeset", MathJax.Hub, "foo"]);

与

MathJax.Hub.Queue(["Reprocess", MathJax.Hub, "foo"]);

希望它有所帮助。

Ractive JS并使用LaTeX输入更新MathJax？

2 个答案: