Aem 如何在数据列表中添加条件元素?
我目前有一个数据列表,它填充一个JS数组,如下所示:Aem 如何在数据列表中添加条件元素?,aem,sightly,Aem,Sightly,我目前有一个数据列表,它填充一个JS数组,如下所示: var infoWindowContent = [ <div data-sly-use.ed="Foo" data-sly-list="${ed.allassets}" data-sly-unwrap> ['<div class="info_content">
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>
];
看看这里的示例,我会将此逻辑放入JS USe api中以填充此数组。要快速回答您的问题,可以在列表中设置一个条件(使用
数据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>
对于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();
}
}
package apps.MYSITE.components.MYCOMPONENT;
导入com.adobe.cq.sightly.WCMUsePojo;
导入org.apache.sling.commons.json.io.jsonString;
导入com.adobe.granite.xss.XSSAPI;
公共类Foo扩展了WCMUsePojo{
私有JSONString内容;
@凌驾
public void activate()引发异常{
XSSAPI XSSAPI=getSlingScriptHelper().getService(XSSAPI.class);
content=新的JSONStringer();
content.array();
//您的代码将在此处迭代所有资产
对于(int i=1;i
<div class="info-window"
data-sly-use.foo="Foo"
data-content="${foo.jsonContent}"></div>
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();
}
}
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);
});
});