AEM6 sightly passing through variable via template into javascript variable

[TomMaton]

I'm using the new sightly language in AEM6 to render my components using templates, in my component there is a video that uses the JWPlayer plugin which needs the following code to initalise the video:

<div id='playerpwSIOjcRZrCa'></div> <script type='text/javascript'> jwplayer('playerpwSIOjcRZrCa').setup({ file: '//www.youtube.com/watch?v=123456', title: 'Video title', width: '100%', aspectratio: '16:9' }); </script>

But I want to make the Youtube variable dynamic so the user can change the id within the author so have got the following template passing in the videoPath (youtube id):

<template data-sly-template.player="${@ videoPath}"> Video Id: ${videoPath} <script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script> <div id='playerpwSIOjcRZrCa'></div> <script type='text/javascript'> jwplayer('playerpwSIOjcRZrCa').setup({ file: '//www.youtube.com/watch?v=' ${videoPath}, title: 'Video title', width: '100%', aspectratio: '16:9' }); </script> </template>

The problem I'm having is the ${videoPath} in the tags is not rendering the id where as the one at the top of the template is.

Is there a way in solving this using the sightly templates?

[Sham_HC · Accepted solution]

The variable is part of script please use context as scriptString. Details at http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Display%20Context

[Scott_Brodersen]

I received this information as well about your question:

The reason we don't display expressions that are in scripts or in styles is because these two contexts cannot be made cross-site scripting safe automatically. This is why you must provide a context option for them.

You have the scriptToken and scriptString, respectively the styleToken and styleString contexts that should help, and worse case if they don't do what you expect you have the unsafe context.

E.g:

<div id='playerpwSIOjcRZrCa'></div> <script type='text/javascript'> jwplayer('playerpwSIOjcRZrCa').setup({ file: '//www.youtube.com/watch?v=${videoPath @ context="scriptString"}', title: 'Video title', width: '100%', aspectratio: '16:9' }); </script> 

scott