Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Конфликт шаблонизаторов Django и Vue.js

Конфликт шаблонизаторов Django и Vue.js

Вёрстка в index.html проходит сразу через два шаблонизатора — сначала Django на сервере, затем Vue.js на фронтенде. И там и там для подстановки используются фигурные скобки {{…}}, что может привести к неожиданному, очень странному результату.

Как убедиться, что проблема в этом

Откройте index.html и найдите там код, который Django может принять за свои места для подстановки. Выглядеть должно так: {{…}} или {%…%}.

Как чинить

Избежать конфликта можно с помощью шаблонного тега verbatim. Воспользуйтесь тем фактом, что Vue.js влияет только на часть вёрстку — ту, что используется в качестве шаблона:

  el: '#sidebar-app',
  template: document.getElementById('app-template').innerHTML,
  ...
});

Если указан атрибут template, то Vue.js берёт шаблон из соответствующей строки. Метод document.getElementById ищет в DOM дереве элемен с указанным id, а innerHTML позволяет добраться до его содержимого.

el — это элемент, внутри которого Vue.js поместит результат рендера. Строка #sidebar-app — это селектор того элемента.

Если атрибут template не указан, то шаблон будет взят из элемена el.

Как проверить

Загрузить страницу в браузере и откройте её исходный код — View page source. Проверить вёрстку внутри тега '#sidebar-app', там должны остаться размеченные места с подстановкой {{…}}. Если их нет - значит вмешалась Django и всё сломала.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment