传递信息从树枝到JavaScript
编辑该页面警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 5.2,不再维护。
读这个页面的更新版本Symfob娱乐下载ony 6.2(当前的稳定版本)。
数据在以后的JavaScript属性和阅读它们。例如:
1 2 3
<div类=“js-user-rating”data-is-authenticated=”{{app.user吗?‘真’:‘假’}}”>< !——……- - >< /div>获取在JavaScript中:
1 2 3 4 5 6 7
文档.addEventListener (“DOMContentLoaded”内,函数(){varuserRating =文档.querySelector (“.js-user-rating”);varisAuthenticated = userRating.dataset.isAuthenticated;/ /或jQuery/ / var isAuthenticated = $ (' .js-user-rating ') . data (“isAuthenticated”);});
请注意
当从JavaScript访问数据属性,属性名称从dash-style camelCase转换。例如,data-is-authenticated就变成了isAuthenticated和data-number-of-reviews就变成了numberOfReviews。
没有大小限制的价值数据-属性,因此您可以存储任何内容。在小枝,使用html_attr逃避策略以避免干扰的HTML属性。例如,如果您的用户对象有一些getProfileData ()方法返回一个数组,您可以执行以下操作:
1 2 3
<divdata-user-profile=”{{app.user吗?app.user.profileData |json_encode| e (html_attr)}}”>< !——……- - >< /div>
1 2 3
<div类=“js-user-rating”data-is-authenticated=”{{app.user吗?‘真’:‘假’}}”>< !——……- - >< /div>1 2 3 4 5 6 7
文档.addEventListener (“DOMContentLoaded”内,函数(){varuserRating =文档.querySelector (“.js-user-rating”);varisAuthenticated = userRating.dataset.isAuthenticated;/ /或jQuery/ / var isAuthenticated = $ (' .js-user-rating ') . data (“isAuthenticated”);});请注意
当从JavaScript访问数据属性,属性名称从dash-style camelCase转换。例如,data-is-authenticated就变成了isAuthenticated和data-number-of-reviews就变成了numberOfReviews。
数据-属性,因此您可以存储任何内容。在小枝,使用html_attr逃避策略以避免干扰的HTML属性。例如,如果您的用户对象有一些getProfileData ()方法返回一个数组,您可以执行以下操作:1 2 3
<divdata-user-profile=”{{app.user吗?app.user.profileData |json_encode| e (html_attr)}}”>< !——……- - >< /div>
这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。
< /article>
