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

document.addEventListener('DOMContentLoaded', function() {
    var userRating = document.querySelector('.js-user-rating');
    var isAuthenticated = userRating.dataset.isAuthenticated;
    var user = JSON.parse(userRating.dataset.user);

    // или с jQuery
    //var isAuthenticated = $('.js-user-rating').data('isAuthenticated');
});

Лимита размера для значения атрибутов 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>