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