Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use Sightly expressions in Handlebar templates, avoiding to explicitly set the context on each expression.

As Sightly only knows the syntax of HTML and not of JS or of CSS, it can automatically execute the appropriate escaping and cross-site scripting protection for expressions located in HTML, but it cannot do that for expressions located in JS or in CSS contexts. To remain as secure as possible, Sightly makes it mandatory to provide explicitly the context in those two contexts.

For Handlebar templates, this is unfortunate though as it is actually not JavaScript, but HTML that is located within the script elements, which Sightly would be able to parse properly. This trick shows that by separating the Handlebar script into a dedicated file, Sightly then parses that template as HTML again.

Without separating this example into two distinct files, the expression of the example should have been written as follows: ${properties.jcr:title @ context='text'}

The list of all available contexts can be found here: http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Display%20Context

<script id="my-handlebar-template" type="text/x-handlebars-template" data-sly-include="handlebar.html"></script>
<body>
<!--/* This output now works and doesn't need an explicit context to be defined */-->
<p>${properties.jcr:title}</p>
</body>
@steeleforge

This comment has been minimized.

Copy link

@steeleforge steeleforge commented May 27, 2015

Slick! Will give this a shot. Thank you! (davidsteele from twitter)

@steeleforge

This comment has been minimized.

Copy link

@steeleforge steeleforge commented May 27, 2015

I was considering resorting to using the .hbs treatment from social communities but would miss out on WCMUse goodies.

@apurvc

This comment has been minimized.

Copy link

@apurvc apurvc commented Jul 23, 2016

So what is the recommendation hbs or sightly or both, in here we are doing both . do you recommend mixing them.

@mkovacek

This comment has been minimized.

Copy link

@mkovacek mkovacek commented Jun 26, 2017

In this example block helpers like "if" or "if-wcm-mode" are not working. How to achive to work? If I change to handlebar.hbs then it works, but than are problem Sightly expressions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment