How to pass javascript value in sightly use object?

[gouravmakhija]

Is there any way to pass value in sightly template from javascript

e.g.
template.jade

div(data-sly-use.testArray="${\'com.test.Service\'}" data-sly-unwrap)

div(data-sly-use.testArray="${\'com.test.Service\' @ year='2017'}" data-sly-unwrap)

div(data-sly-use.testArray="${\'com.test.Service\' @ exam='java'}"

render html file

I have to render below template based on page url condition

Case 1: IF page url doesn't have any value

e.g. pageurl = http://www.google.com/mypage.html

<div data-sly-use.vs="${'com.test.Service'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.allMakes}">

    <li data-sly-text="${item}"></li>

</ol>

Case 2: IF page url have year & value

e.g. pageurl = http://www.google.com/mypage.html/year/2017

year

<div data-sly-use.vs="${'com.test.Service' @ year='2017'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.testForYear}">

    <li data-sly-text="${item}"></li>

</ol>

Case 3: IF page url have exam & value

e.g. pageurl = http://www.google.com/mypage.html/exam/java

<div data-sly-use.vs="${'com.test.Service' @ exam='java'}" data-sly-unwrap="data-sly-unwrap"></div>

<ol data-sly-list.item="${vs.testForExam}">

    <li data-sly-text="${item}"></li>

</ol>

Case 4: there may be case when exam value should not be there

e.g. page url is like http://www.google.com/mypage.html/exam/

[smacdonald2008]

I recommend using Java - either WCMUsePojo or Sling Modles - over JS API for use with HTL:

We have a lot of HTL articles that show use of WCMUsePojo and Sling Models. Here are a few...

1. Getting Started WCMUsePojo -- Scott's Digital Community: Creating an AEM HTML Template Language component that uses the WCMUsePojo...
2. More advanced WCMUsePojo - Scott's Digital Community: Creating an Adobe Experience Manager Newsletter HTL component
3. HTL and Sling Model -- Scott's Digital Community: Creating a custom Touch UI Grid Component for Adobe Experience Manager
4. How to handle a collection with HTL and WCMUsePojo - Scott's Digital Community: Creating an Adobe Experience Manager HTL component that displays a repeat...
5. How to invoke a Restful Service and display in HTL -- Scott's Digital Community: Creating an AEM HTML Template Language Component that displays data from ...
6. How to build a custom HTL Image/Text component that shows use of IF statements in HTL -- Scott's Digital Community: Creating a custom Image Text component for Experience Manager 6.3

Here are some community articles that show HTL and JS API:

1. http://aempodcast.com/2015/javascript/understanding-javascript-use-api-aem/#.WcMC1siGOF4

2. Adding JavaScript Functions for Sightly to Use

3. Guide for working with Templates and Call in Sightly AEM 6.1 | Adobe AEM Club

Hope this helps...

[Feike_Visser1 · Accepted solution]

Remember that HTL/Sightly is fully serverside.