Passing Information from Twig to JavaScript

In Symfony applications, you may find that you need to pass some dynamic data (e.g. user information) from Twig to your JavaScript code. One great way to pass dynamic configuration is by storing information in data attributes and reading them later in JavaScript. For example:

Symfony アプリケーションでは、動的データ (ユーザー情報など) を Twig から JavaScript コードに渡す必要がある場合があります。動的構成を渡す優れた方法の 1 つは、情報をデータ属性に格納し、後で 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>

Fetch this in JavaScript:

これを 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);

    // or with jQuery
    //var isAuthenticated = $('.js-user-rating').data('isAuthenticated');
});

Note

ノート

When accessing data attributes from JavaScript, the attribute names are converted from dash-style to camelCase. For example, data-is-authenticated becomes isAuthenticated and data-number-of-reviews becomes numberOfReviews.

JavaScript からデータ属性にアクセスする場合、属性名はダッシュ スタイルからキャメル ケースに変換されます。たとえば、data-is-authenticated は isAuthenticated になり、data-number-of-reviews はnumberOfReviews になります。

There is no size limit for the value of the data- attributes, so you can store any content. In Twig, use the html_attr escaping strategy to avoid messing with HTML attributes. For example, if your User object has some getProfileData() method that returns an array, you could do the following:

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>