File tree Expand file tree Collapse file tree 1 file changed +12
-5
lines changed Expand file tree Collapse file tree 1 file changed +12
-5
lines changed Original file line number Diff line number Diff line change @@ -16,13 +16,18 @@ Fetch this in JavaScript:
16
16
17
17
.. code-block :: javascript
18
18
19
- // jquery isn't required, but makes things simple
20
- var $ = require (' jquery' );
21
-
22
- $ (document ).ready (function () {
23
- var isAuthenticated = $ (' .js-user-rating' ).data (' is-authenticated' );
19
+ document .addEventListener (' DOMContentLoaded' , function () {
20
+ var userRating = document .querySelector (' .js-user-rating' );
21
+ var isAuthenticated = userRating .dataset .isAuthenticated ;
24
22
});
25
23
24
+ .. note ::
25
+
26
+ When `accessing data attributes from JavaScript `_, the attribute names are
27
+ converted from dash-style to camelCase. For example, ``data-is-authenticated ``
28
+ becomes ``isAuthenticated `` and ``data-number-of-reviews `` becomes
29
+ ``numberOfReviews ``.
30
+
26
31
There is no size limit for the value of the ``data- `` attributes, so you can
27
32
store any content. In Twig, use the ``html_attr `` escaping strategy to avoid messing
28
33
with HTML attributes. For example, if your ``User `` object has some ``getProfileData() ``
@@ -33,3 +38,5 @@ method that returns an array, you could do the following:
33
38
<div data-user-profile="{{ app.user ? app.user.profileData|json_encode|e('html_attr') : '' }}">
34
39
<!-- ... -->
35
40
</div>
41
+
42
+ .. _`accessing data attributes from JavaScript` : https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
You can’t perform that action at this time.
0 commit comments