Переменная времени выполнения не разрешена внутри элемента стиля в Sightly в AEM 6.2

Question

Я пытаюсь предоставить фоновое изображение для div, создавая переменную в виде.

Я читаю свойство визуально, и когда я добавляю его в тег стиля, оно не работает.

вот HTML

<sly data-sly-test.fileReference="${properties.title}" />

<div style="background: url(${fileReference}); background-position: center top;">
<p>${properties.title}</p>

Когда страница отображается, это то, что я вижу

<div style="background: url(); background-position: center top;">
<p>my Title</p></div>

Это означает, что ${properties.title} внутри <p> тег принят, но он не работает с внутренним элементом стиля.

Answer 1

Переменная разрешается просто отлично. Причина ваша url() значение пусто, потому что вы не используете правильный контекст отображения. Кроме того, значение, которое вы передаете туда, строка "my Title", не является действительным URL-адресом (что необходимо распечатать) или допустимым токеном стиля (что обычно отображается в style атрибут)

Вы заметите, что каждое из следующих выражений отображает пустой url() значение:

<div style="background: url(${'cookies'});"></div>
<div style="background: url(${'cookies with chocolate chips'});"></div>

<!--/* both print background: url();*/-->

Если мы заставим контекст отображения разрешить любую строку, значение будет напечатано

<div style="background: url(${'cookies' @ context='unsafe'});">
</div>
<!--/* prints background: url(cookies);*/-->

В script а также style контексты, HTL требует, чтобы контекст дисплея был указан явно. Если это не так, вывод не отображается.

То, что вы хотите вывести для отображения фонового изображения, - это URL-адрес изображения. Давайте попробуем сделать это явным:

<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');">
</div>
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/-->

Там, это делает трюк!

Теперь, как совет, старайтесь избегать встроенного моделирования. Вы избавите себя от подобных проблем с контекстами отображения, и ваш CSS будет проще поддерживать, если он является частью клиентской библиотеки.

Answer 2

Это сработало для меня --- добавив @ context='styleToken'

<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>