Как добавить условные элементы в data-sly-list?
В настоящее время у меня есть список хитрых данных, который заполняет массив JS следующим образом:
var infoWindowContent = [
<div data-sly-use.ed="Foo"
data-sly-list="${ed.allassets}"
data-sly-unwrap>
['<div class="info_content">' +
'<h3>${item.assettitle @ context='unsafe'}</h3> ' +
'<p>${item.assettext @ context='unsafe'} </p>' + '</div>'],
</div>
];
Мне нужно добавить немного логики в этот массив. Если assetFormat свойство 'text/html' только тогда я хочу напечатать <p> тег. Если assetFormat свойство image/png тогда я хочу напечатать img тег.
Я стремлюсь к чему-то вроде этого. Можно ли этого достичь?
var infoWindowContent = [
<div data-sly-use.ed="Foo"
data-sly-list="${ed.allassets}"
data-sly-unwrap>
['<div class="info_content">' +
'<h3>${item.assettitle @ context='unsafe'}</h3> ' +
if (assetFormat == "image/png")
'<img src="${item.assetImgLink}</img>'
else if (assetFormat == "text/html")
'<p>${item.assettext @ context='unsafe'}</p>'
+ '</div>'],
</div>
];
2 ответа
Чтобы ответить на ваш вопрос быстро, да, у вас может быть условие (с data-sly-test) в вашем списке следующим образом:
<div data-sly-list="${ed.allAssets}">
<h3>${item.assettitle @ context='html'}</h3>
<img data-sly-test="${item.assetFormat == 'image/png'}" src="${item.assetImgLink}"/>
<p data-sly-test="${item.assetFormat == 'text/html'}">${item. assetText @ context='html'}"</p>
</div>
Но, посмотрев на то, что вы пытаетесь сделать, в основном рендеринг на стороне клиента, а не на сервере, позвольте мне сделать шаг назад, чтобы найти лучшее решение, чем использование Sightly для генерации кода JS.
Несколько правил для написания хороших шаблонов Sightly:
- Старайтесь не смешивать HTML, JS и CSS в шаблоне: Sightly специально ограничен HTML и поэтому очень плохо выводит JS или CSS. Следовательно, логика для генерации объекта JS должна выполняться в Use-API с использованием некоторых удобных API, таких как JSONWriter.
- Также избегайте как можно больше
@context='unsafe'Если только вы сами не отфильтруете эту строку. Каждая строка, которая не экранирована или не отфильтрована, может быть использована в атаке XSS. Это имеет место, даже если бы только авторы AEM могли ввести эту строку, потому что они тоже могут быть жертвами атаки. Чтобы быть в безопасности, система не должна надеяться, что никто из их пользователей не будет взломан. Если вы хотите разрешить HTML, используйте@context='html'вместо.
Хороший способ передачи информации в JS - это использование атрибута данных.
<div class="info-window"
data-sly-use.foo="Foo"
data-content="${foo.jsonContent}"></div>
Для разметки, которая была в вашем JS, я бы предпочел переместить ее в JS на стороне клиента, чтобы соответствующая логика Foo.java создавала только содержимое JSON без какой-либо разметки внутри.
package apps.MYSITE.components.MYCOMPONENT;
import com.adobe.cq.sightly.WCMUsePojo;
import org.apache.sling.commons.json.io.JSONStringer;
import com.adobe.granite.xss.XSSAPI;
public class Foo extends WCMUsePojo {
private JSONStringer content;
@Override
public void activate() throws Exception {
XSSAPI xssAPI = getSlingScriptHelper().getService(XSSAPI.class);
content = new JSONStringer();
content.array();
// Your code here to iterate over all assets
for (int i = 1; i <= 3; i++) {
content
.object()
.key("title")
// Your code here to get the title - notice the filterHTML that protects from harmful HTML
.value(xssAPI.filterHTML("title <span>" + i + "</span>"));
// Your code here to detect the media type
if ("text/html".equals("image/png")) {
content
.key("img")
// Your code here to get the asset URL - notice the getValidHref that protects from harmful URLs
.value(xssAPI.getValidHref("/content/dam/geometrixx/icons/diamond.png?i=" + i));
} else {
content
.key("text")
// Your code here to get the text - notice the filterHTML that protects from harmful HTML
.value(xssAPI.filterHTML("text <span>" + i + "</span>"));
}
content.endObject();
}
content.endArray();
}
public String getJsonContent() {
return content.toString();
}
}
JS на стороне клиента, находящийся в соответствующей клиентской библиотеке, будет затем брать атрибут данных и записывать соответствующую разметку. Очевидно, избегайте встраивания этого JS в HTML, иначе мы бы снова смешивали вещи, которые должны быть разделены.
jQuery(function($) {
$('.info-window').each(function () {
var infoWindow = $(this);
var infoWindowHtml = '';
$.each(infoWindow.data('content'), function(i, content) {
infoWindowHtml += '<div class="info_content">';
infoWindowHtml += '<h3>' + content.title + '</h3>';
if (content.img) {
infoWindowHtml += '<img alt="' + content.img + '">';
}
if (content.text) {
infoWindowHtml += '<p>' + content.title + '</p>';
}
infoWindowHtml += '</div>';
});
infoWindow.html(infoWindowHtml);
});
});
Таким образом, мы перенесли всю логику этого информационного окна на клиентскую часть, и если бы она стала более сложной, мы могли бы использовать некоторую систему шаблонов на стороне клиента, такую как Handlebars. Серверный Java-код не должен ничего знать о разметке и просто выводит необходимые данные JSON, а шаблон Sightly заботится о выводе только серверной отрисованной разметки.
Глядя на пример здесь, я бы поместил эту логику в USS-api JS, чтобы заполнить этот массив.