Передача информации из Twig в JavaScript

В приложениях Symfony вы можете обнаружить, что вам нужно передать некоторые динамические данные (например, данные ипользователя) из Twig в ваш JavaScript код. Отличным способом передачи динамической конфигурации является хранение ниформации в атрибутах data и считывание её позже в JavaScript. Например:

1
2
3
<div class="js-user-rating" data-is-authenticated="{{ app.user ? 'true' : 'false' }}">
    <!-- ... -->
</div>

Вызовите это в JavaScript:

1
2
3
4
5
6
// jquery не требуется, но всё облегчает
var $ = require('jquery');

$(document).ready(function() {
    var isAuthenticated = $('.js-user-rating').data('is-authenticated');
});

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

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.