Объединить Python Flask Jinja2 и Усы - PullRequest
Новая
       22

Объединить Python Flask Jinja2 и Усы

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

Я использую Mustache.js с Flask и jinja2 и у меня проблема с рендерингом изображений.

Мне удалось отобразить мой шаблон усов в jinja благодаря {% raw %} и {% endraw %}, но теперь мне нужно использовать url_for() из Jinja в моем шаблоне, чтобы определить источник моего изображения. Существует конфликт между усиками и усиками.

Мой JavaScript: 

target = document.getElementById("target");
var template = $('#my-template').html();
Mustache.parse(template);
var rendered = Mustache.render(template, {"title":"My Title","photo_name":"photo.jpg"});
target.innerHTML = rendered;

И мой шаблон: 

<script id="my-template" type="x-tmpl-mustache">
{% raw %}
  <h1> {{title}} </h1>
  <img src="{{ url_for('static',filename='images/{{photo_name}}') }}" alt="my_photo">
{% endraw %}
</script>

Есть идеи, как решить эту проблему?

1 Ответ

1 голос
/ 20 июня 2019

Вы выражаете raw обработку большого количества контента, некоторые из которых вам не нужны.Предлагаем вам сузить область действия {% raw %} ... {% endraw %}, чтобы охватить только те переменные шаблона, которые вы хотите, чтобы Усы заполнил. Например: 

<script id="my-template" type="x-tmpl-mustache">

  <h1> {% raw %}{{title}}{% endraw %} </h1>
  <img src="{{ url_for('static',filename='images/')}}{% raw %}{{photo_name}}{% endraw %}" alt="my_photo">

</script>

Для браузера это отобразит следующее, разделы шаблона которого могут затембыть заполненным JS / Mustache: 

<script id="my-template" type="x-tmpl-mustache">

  <h1> {{title}} </h1>
  <img src="/static/images/{{photo_name}}" alt="my_photo">

</script>

Таким образом, вы получаете Mustache, обрабатывающий определенные замены шаблонов, Flask / Jinja2, обрабатывающий остальные.

Используя два движка шаблонов с таким чередованием и перекрытиемобязанности - не говоря уже о идентичном синтаксисе маркировки переменных шаблона - делают «цитирование» совершенно необходимым, но в то же время очень удобным.

...