Can't extract Sling model values in Sightly

[kevingtan]

Hi All,

I am having an issue with extracting a sling model variable in Sightly. Here is the code:

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div class="image-title" style="background-image: url('${utilModel.imageRef}');">

=== Output ===
<div class="image-title" style="background-image: url('');">

But if I do the following, I will get the value of the variable:

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div>${utilModel.imageRef}</div>

=== Output ===

<div>/content/dam/camera2-3.jpg</div>

I tested a few cases, it looks like the `style=...` has an impact on it. Can someone explain how to extract a value within inline style?

Thanks!

-kt

[Mahedi_Sabuj · Accepted solution]

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything.

<!--/* Styles */-->
<a href="#whatever" style="color: ${colorName @ context='styleToken'};">Link</a>
<style>
  a.${className @ context="styleToken"} {
    font-family: '${fontFamily @ context="styleString"}', sans-serif;
    color: #${colorHashValue @ context="styleToken"};
    margin-${side @ context="styleToken"}: 1em; /* E.g. for bi-directional text */
  }
</style>

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div style="background-image: url(${utilModel.imageRef @ context= 'styleString' });">​</div> <!-- You can use text as context also -->

Reference: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive 

[kevingtan]

Thank you! it works. I used context='uri' and it didn't work, so I thought it had nothing to do with context.

[Sudheer_Sundalam]

@kevingtan , As @Mahedi_Sabuj  mentioned it is required to set context for Style and Script tokens as XSS is implicit in HTL/Sightly code.

Please have this HTL/Sightly style guide handy for future reference: https://www.netcentric.biz/insights/2015/08/aem-sightly-style-guide