从 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'));
});

注意

如果您更喜欢通过 JavaScript 的 dataset 属性访问 data 属性，则属性名称会从短划线样式转换为驼峰式。例如，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>
本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。
目录
    版本