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.