KaTex and Framework

Questions
1

I’m new to Frameworks and work with the Split View Template.
Therefore i want to show math, i included the javascript library from KaTex just inside the head-tag

<link rel="stylesheet" href="../css/app.css">
<link rel="stylesheet" href="../katex/katex.min.css">
</head>
<body>

At the end of the index.html i put the javascript code as

  <!-- Your custom app scripts -->
  <script src="../js/app.js"></script>
  <script src="../katex/katex.min.js" type="text/javascript"></script>
  <script src="../katex/contrib/auto-render.min.js" type="text/javascript"></script>
  <script>
    renderMathInElement(document.body);
  </script>
</body>

Now all math formulas are rendered inside index.html as expected, e.g. $$a^2$$ as a² in displaystyle. But if i load another page with the same code, no math formula is rendered. In this case the file mechanics.html is loaded, but no math formula get rendered (snippet from the template).

<div class="page" data-name="mechanics">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
    </div>
   <div class="title">Mechanik und Spezielle Relativitätstheorie</div>
 </div>

If i open the file mechanics.html seperately, all formula get correctly rendered.

Thanks for your help.

2

This is how JavaScript works, you need to call your renderMathInElement within pageInit for every page loaded and pass page’s HTML element to this function