传递信息从树枝到JavaScript

               1 2 3 4 5 6
               <div类=“js-user-rating”data-is-authenticated=”{{app.user吗?‘真’:‘假’}}”关键因素=”{{app.user |序列化(格式= json)}}”>< !——……- - >< /div>
              

获取在JavaScript中:

               1 2 3 4 5 6 7 8
               文档.addEventListener (“DOMContentLoaded”内,函数(){varuserRating =文档.querySelector (“.js-user-rating”);varisAuthenticated = userRating.dataset.isAuthenticated;var用户=JSON.parse (userRating.dataset.user);/ /或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>