Передача информации из 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>