Ожидание, когда Джинджа полностью закончит рендеринг страницы перед выполнением сценария - PullRequest
Новая
       20

Ожидание, когда Джинджа полностью закончит рендеринг страницы перед выполнением сценария

0 голосов
/ 04 июня 2019

Можно ли подождать, пока Jinja2 завершит вставку всех элементов шаблона, прежде чем выполнять определенный скрипт? Я пытаюсь сделать какую-то математику, используя KaTeX на странице, которая также содержит кучу шаблонных блоков. Однако математика отрисовывается до того, как Jinja2 отрисовывает все блоки шаблона, поэтому любая математика в указанных блоках не отображается.

Я мог бы установить тайм-аут, скажем, 5 секунд и затем выполнить скрипт рендеринга ( это работает ), но я бы предпочел использовать более элегантное решение. Использование defer внутри тегов <script> в соответствии с инструкциями здесь ничего не делает и 

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

Что такое event, который сообщает браузеру, что шаблонизатор, такой как Jinja2, завершил свою работу? Это, конечно, не DOMContentLoaded, исходя из вышеизложенного.

Редактировать

Здесь - это пример курса, реализованного с использованием A + LMS . Проблемный шаблон можно найти в папке _templates. В шаблоне по умолчанию используется MathJax, но, поскольку эта конкретная библиотека имеет некоторые раздражающие функции, такие как очень медленный, когда требуется много математики для рендеринга, я решил вместо этого использовать KaTeX. Вот моя версия шаблона: 

{% extends "aplus/layout.html" %}

{% block extrahead %}

<!--  MathJax (LaTex math)
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" data-aplus></script>
 -->

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
  <script data-aplus>
    function render_katex() {
      if (window.katex) {
          renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
          );
        console.log("Math rendered.");
      } else {
        console.log("KaTeX not loaded.")
      };
    };
  </script>

<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="setTimeout(render_katex,300);" data-aplus></script>


<!-- Custom course styles -->
<link rel="stylesheet"
      href="{{ pathto('_static/course.css', 1) }}"
      type="text/css"
      data-aplus />

<link rel="stylesheet"
      href="{{ pathto('_static/active_element.css', 1) }}"
      type="text/css"
      data-aplus />

{% endblock %}

Редактировать 2

Ссылка на полный источник страницы на Pastebin.

1 Ответ

0 голосов
/ 05 июня 2019

Хорошо, я пришел к выводу, что лучший вариант - просто подождать, пока шаблон пройдет через Jinja2.Как долго ждать?Что ж, это зависит от того, сколько упражнений на одной странице:бывает.Вот почему указывается minimum_render_time.Это было проверено только на этой конкретной странице, поэтому в будущем, возможно, потребуется немного изменить значения.

...