data-sly-test (Sightly) | Community
Skip to main content
N
nikunjk71293848
Level 3
October 16, 2015
Solved

data-sly-test (Sightly)

  • October 16, 2015
  • 4 replies
  • 9927 views

Hi,

 

Can we test global variables declared in javascript inside HTML with the help of data-sly-test command?

 

I have set a var xtest = false inside javascript and have used following statement inside HTML: <div data-sly-test.abcvar = "${xtest}">hello</div>.

But hello text is displayed in all scenario. How do i test a global variable inside HTML with the help of sightly?

 

Thanks,

Nikunj

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by GabrielWalt

Sightly is a server-side template language, so you cannot use it to do client-side operations. The confusion might come from the fact that it is using data attributes, or from the fact that it can also use JavaScript as scripting language to prepare the variables. But despite it looking a bit like a client-side thing, it is actually all evaluated on the server: a Sightly template has to be placed into AEM components, just like the JSP templates. Sightly is basically a replacement for JSP.

If you wish to do a client-side script to control the display of an element, then I'd first give it an ID (e.g. <div id="myid">), and do some jQuery script to show/hide it, like following:

jQuery(function($) { $('div#myid').toggle(xtest); });

Best,
Gabriel

4 replies

GabrielWalt
Adobe Employee
GabrielWaltAdobe EmployeeAccepted solution
Adobe Employee
October 16, 2015

Sightly is a server-side template language, so you cannot use it to do client-side operations. The confusion might come from the fact that it is using data attributes, or from the fact that it can also use JavaScript as scripting language to prepare the variables. But despite it looking a bit like a client-side thing, it is actually all evaluated on the server: a Sightly template has to be placed into AEM components, just like the JSP templates. Sightly is basically a replacement for JSP.

If you wish to do a client-side script to control the display of an element, then I'd first give it an ID (e.g. <div id="myid">), and do some jQuery script to show/hide it, like following:

jQuery(function($) { $('div#myid').toggle(xtest); });

Best,
Gabriel

Feike_Visser1
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
October 16, 2015

Can you share some code? I don't fully understand your question.

Prateek_Agrawal
Prateek_Agrawal
Level 2
October 16, 2015

Hi Nikunj,

 

I am also trying to do the same. I have a JS function returning some value. And I have to use this value in <div data-sly-test>condtion.

Were you able to achieve this. If yes can you kindly help.

 

Regrads,

Prateek

GabrielWalt
Adobe Employee
GabrielWaltAdobe Employee
Adobe Employee
October 16, 2015

Hi Prateek,

As explained, this only works for server-side JavaScript, so I'm assuming that this is the case for you.

This is how a simple example would like like:

<div data-sly-use.logic="logic.js"> <p data-sly-test="${logic.foo}">${logic.foo}</p> </div>

Assuming that you have something like following corresponding JavaScript:

use(function () { return { foo: 'My foo text...' }; });

What it does: if the foo text exists and is not empty, then the <p> element will be displayed, showing the content of the foo text.

In case this doesn't answer your question, then please explain further what exactly you try to achieve.

Best,
Gabriel

Terms & ConditionsAccessibility statement

Loading footer...