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

Дата оновлення перекладу 2024-05-29

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

Note

Якщо ви віддаєте перевагу доступу до атрибутів даних через властивість набору даних JavaScript, імена атрибутів буде перетворено зі стилю тире у camelCase. Наприклад, data-number-of-reviews стане dataset.numberOfReviews:

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>