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