Как правильно включить и использовать jQuery с Twig в Symfony 3

Содержание

1 Почему это происходит?
2 Решение

Symfony — это один из лучших вариантов для работы в бэкэнде вашего веб-проекта, а jQuery — одна из самых простых сред, доступных для управления DOM во внешнем интерфейсе. Без сомнения, для простых сайтов и блогов это хорошая комбинация, однако начинающие разработчики Symfony столкнутся с проблемой, когда они включат jQuery в base.html.twig файл, и они пишут сценарии в дочерних представлениях (в блоке тела), которые расширяют это представление, известное исключение $ is not defined появится в консоли.

Заметка

В этой статье мы не будем показывать, как лучше всего включить (или определить местонахождение) файл jQuery в вашем проекте, это зависит от вас. Вы можете получить больше информации по этому вопросу, читая этот пост в Stack Overflow.

Почему это происходит?

Вы наверняка включили JQuery в конце тег базового документа как хорошая практика для оптимизации времени рендеринга вашей страницы, отлично сработано ! Однако почему тогда он не работает на Symfony должным образом? Чтобы облегчить понимание этой ошибки, мы будем работать с примерами. У нас есть следующая разметка как наша base.html.twig файл в проекте:

{# file: base.html.twig #}
{# Body block where child views will appear #}
{% block body %}{% endblock %}
{#
Ignoring the way you load jQuery , if you take care of the good practices
loaded at the end as a good practice
#}

Файл имеет только 1 блок, основной блок. Теперь, если вы обращаетесь к другому действию в вашем проекте, которое возвращает некоторый HTML-ответ и использует этот базовый файл, представление будет выглядеть, например, следующим образом:

{% extends base.html.twig %}
{% block body %}
Example Child View 1
Some text 1
$(document).ready(function(){
console.log("Script working properly");
});
{% endblock %}

Дочернее представление использует JavaScript, как вы можете видеть, и это очень просто. Как только вы получите доступ к своему маршруту в браузере, ответ HTML будет:


Example Child View 1
Some text 1
$(document).ready(function(){
console.log("Script working properly");
});

В самом деле, JQuery выполняется, когда он даже не доступен.

Решение

Проблема вызвана неправильным пониманием того, как работают блоки Twig. По умолчанию вам не нужно загружать jQuery в тег заголовка документа, потому что это снизит скорость загрузки вашего документа. Вам просто нужно создать новый блок, а именно javascripts (имя можно изменить, если хотите) в вашем базовом файле:

{# file: base.html.twig #}
{# Body block where child views will appear #}
{% block body %}{% endblock %}
{#
Ignoring the way you load jQuery , if you take care of the good practices
loaded at the end as a good practice
#}
{#
Create the javascripts blocks where all the scripts written in the child views
should appear really
#}
{% block javascripts %}{% endblock %}

И если вы хотите написать JavaScript (или загрузить файлы) в ваших дочерних представлениях, просто напишите его внутри javascripts блок вместо тела:

{% extends base.html.twig %}
{% block body %}
Example Child View 2
Some text 2
{% endblock %}
{% block javascripts %}
$(document).ready(function(){
console.log("Script working properly");
});
{% endblock %}

Это сгенерирует следующий HTML:


Example Child View 2
Some text 2
$(document).ready(function(){
console.log("Script working properly");
});

Который больше не должен выдавать ошибку, потому что jQuery теперь существует.