Como Jinja2 e Handlebars.js podem coexistir

Sou relativamente novo em Handlebars.js , mas no meu processo de aprendizagem me deparei com uma armadilha muito interessante. Ambos Jinja2 e Handlebars.js (e Mustache.js , suponho) usam a mesma sintaxe de token-substituição: {{ expression }}.

O que estava se mostrando complicado foi quando eu quis usar dados do lado do servidor a la Jinja2 em meus modelos de barras de guia. Como o servidor sabe quando deve fazer a substituição do token e quando deve deixá-lo sozinho para mais tarde? Use {% raw %}:

{{ jinja2 expressions here }}
{% raw %}
    {{ handlebars expressions here }}
{% endraw %}
{{ jinja2 expressions here }}

{% raw %}Diz ao Jinja2 para deixar sozinho o que está dentro, como uma espécie de <pre>tag HTML .

Isso significa que você deve envolver suas <script type="text/x-handlebars-template">tags em {% raw %}tags até o ponto em que precisa que o Jinja2 assuma o controle e, em seguida, “refaça” o seu modelo. Por exemplo:

{% raw %}
  <script type="text/x-handlebars-template">
      <div>
          <h1>{{title}}</h1>
          <a href="{% endraw %}{{ getSomeUrl() }}{% raw %}">
            {{ linkText }}
          </a>
      </div>
  </script>
{% endraw %}