How to pass some HTL variables/objects to a clientlib JS?

Avatar

Avatar
Validate 25
Level 4
jayv25585659
Level 4

Likes

46 likes

Total Posts

131 posts

Correct reply

0 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Validate 25
Level 4
jayv25585659
Level 4

Likes

46 likes

Total Posts

131 posts

Correct reply

0 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 5
View profile
jayv25585659
Level 4

24-06-2021

maybe easier to explain with an example:

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}"></sly>
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-call="${clientLib.all @ categories='myhost.components.mypage'}"></sly>

I want to pass the data stored insite "mypageVars" to the javascript that's included in my clientlib "myhost.components.mypage"

Can you please tell me how it's done?

Thanks

View Entire Topic

Avatar

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 7

24-06-2021

Hi @jayv25585659 ,

 

You can simply give id to your DIV/SLY element and can use jQuery selector to grab the value

 

 

<sly data-sly-use.mypageVars="${'com.myhost.core.impl.view.page.MyPageHelper'}" id="myVarId">
</sly>

 

Inside Clientlib-

 

$( document ).ready(function() {
var myVarValue = $("#myVarId").val();
});

 

The Clientlib should be included on the HTL .