data-sly-test (Sightly)

[nikunjk71293848]

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

[gabriel_walt · Accepted solution]

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]

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

[Prateek_Agrawal]

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

[gabriel_walt]

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