根据在cq对话框中输入的数字，使用data-sly-repeat重复列.列不重复

Question

我想根据cq对话框中添加的列数在列中重复parsys。我只能得到一个列和输入的列数

<div class="items">
<div data-sly-repeat="${grid.cols}" class="col col-lg-4 col-md-2 pt-2 pb-2">
<div data-sly-resource="${'content-{0}' @ format=[colList.index], resourceType='wcm/foundation/components/parsys'}"></div>
</div>
</div>
</div>

carousel.js:

"使用strict";使用(函数(){

var properties = granite.properties,
colCount = properties.numberofcolumns ? properties.numberofcolumns : 3,
cols = '';
return {
"cols"     : colCount
};

});

Answer 1

data-sly-repeat需要一个列表，而不是一个数字。你只返回列数。如果你返回一个有n个元素的列表，data-sly-repeat将为列表中的每一项呈现一个元素。

这是一个有点hack，但在你的carousel.js，你必须返回一个数组的值列表。data-sly-repeat(和data-sly-list)的主要用例是遍历由底层Java/JS代码返回的集合的元素，并输出列表中每个项目的属性。在您的示例中，重复的div元素之间的唯一区别是索引。

use(function() {
var properties = granite.properties,
colCount = properties.numberofcolumns ? properties.numberofcolumns : 3;
var resultList = [];
for (var i = 0 ; i < colCount ; i++) {
resultList.push(i);
}
return {
"cols" : resultList // data-sly-repeat expects a collection
};
});

在一个更一般的注意，似乎你的目标是要做的是包括一堆段落系统的名称，以实现某种列布局。在尝试这一点之前，我会考虑使用OOTB布局容器组件，它可以在编辑模式下调整大小，以适应任何数量的列，而无需任何新的开发。