Совместное использование Jinja и Vue
По умолчанию Jinja использует в качестве тега переменных двойные фигурные скобки, например:
<div>
{{ jinja_variable }}
</div>
Это хорошо, но в случае использования Vue.js возникают проблемы, ведь для экранирования собственных переменных в HTML–разметке он также использует двойные фигурные скобки:
<div>
{{ vue_variable }}
</div>
Подобная ситуация приводит к тому, что после шаблонизации со страницы исчезают все переменные в двойных фигурных скобках, которые могут относится к Vue.
Решением проблемы является переопределение тегов для Jinja. Один из способов сделать это — обновить копию словаря опций jinja_options
статического объекта Flask
в модуле flask
, присвоить эту копию свойству jinja_options
инстанцированного объекта Flask и пересоздать окружение Jinja для этого объекта с помощью функции create_jinja_environment()
.
Например, следующий код переопределяет теги блока, переменных и комментариев:
import flask
app = flask.Flask(__name__)
...
jinja_options = flask.Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='<%',
block_end_string='%>',
variable_start_string='%%',
variable_end_string='%%',
comment_start_string='<!--',
comment_end_string='-->',
))
app.jinja_options = jinja_options
app.create_jinja_environment()
После этого в одном шаблоне можно будет использовать переменные и для Jinja, и для Vue:
<div>
%% jinja_variable %%
</div>
<div>
{{ vue_variable }}
</div>