data-sly-test (Sightly)

Avatar

Avatar

nikunjk71293848

Avatar

nikunjk71293848

nikunjk71293848

15-10-2015

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-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

Answers (3)

Answers (3)

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-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

Avatar

Avatar

Prateek_Agrawal

Avatar

Prateek_Agrawal

Prateek_Agrawal

15-10-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

Avatar

Avatar

Feike_Visser1

Employee

Avatar

Feike_Visser1

Employee

Feike_Visser1
Employee

15-10-2015

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