3

我正在尝试使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]);
  });

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

测试用例

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

有什么想法吗？

编辑：它似乎确实添加了一大堆嵌套MathJax_MathContainer元素，每个调用它出现一个。

JsFiddle 演示与 Peter Krautzberger 的建议- 似乎仍然不起作用

4

2 回答 2

3

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

现在您可以观察变量并触发重绘MathJax.Hub.Queue(["Typeset",MathJax.Hub, "foo"]);

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

于 2013-11-27T13:09:47.793 回答
1

@wrongusername 我对 Ractive 没有任何经验，大约 3 年前我只与 MathJax 合作过，但我尝试过Reprocess而不是Typeset，它有效。我认为您应该使用Reprocess，因为您的输入发生了变化。从文档中，它说

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

在此处查看更新的JSFiddle。

你只需要更换

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

和

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

希望能帮助到你。

于 2016-03-24T04:00:47.263 回答