Ractive JS and updating MathJax with LaTeX input?

Question

I am trying to make ractive.js dynamically update MathJax.

Now I know you can trigger a MathJax reload with:

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

So I've bound this to the observe callback:

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

But when I try to render the MathJax with \begin{equation} {{output}} \end{equation} it remains at its initial value.

testcase

The odd thing is that does get the initial value, just not the updates.

Any thoughts?

EDIT: It does seem to add a whole bunch of nested MathJax_MathContainer elements, one for each call it appears.

---

JsFiddle demo with Peter Krautzberger's suggestion -- still does not seem to work

Answer 1

The thing is that MathJax removes the elements from the DOM so Ractive can no longer update them. This can be solved by instead of using the MathJax searches (e.g. $$) wrapping the LaTeX in a <script type="math/tex; mode=display" id="foo"> element. This will prevent the replacement since MathJax can handle the script element internally.

Now you can observe the variables and trigger the repaint with MathJax.Hub.Queue(["Typeset",MathJax.Hub, "foo"]);

Many thanks to Peter Krautzberger for the suggestion / solution.

Answer 2

@wrongusername I don't have any experience with Ractive and I only worked with MathJax about 3 years back but I have tried Reprocess instead of Typeset, it worked. I think you should use Reprocess because your input changed. From the documentation, it says

Removes any typeset mathematics from the document or DOM element (or elements if it is an array of elements), and then processes the mathematics again, re-typesetting everything.

See the updated JSFiddle here.

You just need to replace

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

with

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

Hope it helps.