Передача інформації з Twig до JavaScript

У додатках Symfony вам може знадобитися передати деякі динамічні дані (наприклад, інформацію користувача) з Twig до вашого коду JavaScript. Одним з чудових способів передачі динамічної конфігурації є збереження інформації в атрибутах data-* і зчитування їх пізніше у JavaScript. Наприклад:

1
2
3
4
5
6

<div class="js-user-rating"
    data-is-authenticated="{{ app.user ? 'true' : 'false' }}"
    data-user="{{ app.user|serialize(format = 'json') }}"
>
    <!-- ... -->
</div>

Отримайте це в JavaScript:

1
2
3
4
5

document.addEventListener('DOMContentLoaded', function() {
    const userRating = document.querySelector('.js-user-rating');
    const isAuthenticated = userRating.getAttribute('data-is-authenticated');
    const user = JSON.parse(userRating.getAttribute('data-user'));
});

1
2
3

// ...
const isAuthenticated = userRating.dataset.isAuthenticated;
const user = JSON.parse(userRating.dataset.user);

Значення атрибутів data-* не мають обмежень за розміром, тому ви можете зберігати будь-який зміст. У Twig використовуйте стратегію екранування html_attr, щоб уникнути плутанини з атрибутами HTML. Наприклад, якщо ваш об'єкт User має метод getProfileData() який повертає масив, ви можете зробити наступне:

1
2
3

<div data-user-profile="{{ app.user ? app.user.profileData|json_encode|e('html_attr') }}">
    <!-- ... -->
</div>