@@ -21,15 +21,21 @@ Fetch this in JavaScript:
21
21
22
22
document .addEventListener (' DOMContentLoaded' , function () {
23
23
const userRating = document .querySelector (' .js-user-rating' );
24
- const isAuthenticated = userRating .dataset . isAuthenticated ;
25
- const user = JSON .parse (userRating .dataset . user );
24
+ const isAuthenticated = userRating .getAttribute ( ' data-is-authenticated ' ) ;
25
+ const user = JSON .parse (userRating .getAttribute ( ' data- user' ) );
26
26
});
27
27
28
28
.. note ::
29
29
30
- When `accessing data attributes from JavaScript `_, the attribute names are
31
- converted from dash-style to camelCase. For example, ``data-number-of-reviews `` becomes
32
- ``dataset.numberOfReviews ``.
30
+ If you prefer to `access data attributes via JavaScript's dataset property `_,
31
+ the attribute names are converted from dash-style to camelCase. For example,
32
+ ``data-number-of-reviews `` becomes ``dataset.numberOfReviews ``:
33
+
34
+ .. code-block :: javascript
35
+
36
+ // ...
37
+ const isAuthenticated = userRating .dataset .isAuthenticated ;
38
+ const user = JSON .parse (userRating .dataset .user );
33
39
34
40
There is no size limit for the value of the ``data-* `` attributes, so you can
35
41
store any content. In Twig, use the ``html_attr `` escaping strategy to avoid messing
@@ -42,4 +48,4 @@ method that returns an array, you could do the following:
42
48
<!-- ... -->
43
49
</div>
44
50
45
- .. _`accessing data attributes from JavaScript` : https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
51
+ .. _`access data attributes via JavaScript's dataset property ` : https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
0 commit comments