基于CQ对话框输入列数，使用data-sly-repeat重复列及内部Parsys失败：仅显示一列的技术问题

你的问题核心在于 data-sly-repeat需要遍历可迭代的集合（比如数组），但你的JavaScript逻辑返回的是单个数字，所以只会渲染一次列。下面是修复后的完整方案：

修复后的JavaScript逻辑（carousel.js） #

我们需要把返回的列数字转换成对应长度的数组，让data-sly-repeat可以遍历：

"use strict";
use(function() {
  var properties = granite.properties,
      // 确保从对话框获取的是数字类型，默认值设为3
      colCount = properties.numberofcolumns ? parseInt(properties.numberofcolumns, 10) : 3,
      // 生成一个长度为colCount的数组，元素为索引值
      cols = Array.from({length: colCount}, (_, i) => i);
  
  return { "cols" : cols };
});

修复后的HTML代码 #

给data-sly-repeat指定明确的循环变量名，方便引用索引：

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

关键修改说明 #

1. 数组转换：将单个数字colCount转为对应长度的数组，这样data-sly-repeat能正确遍历每一项，实现多列渲染。
2. 类型安全：用parseInt处理对话框输入的numberofcolumns，避免字符串类型导致的意外问题。
3. 明确变量名：通过data-sly-repeat.colItem指定循环变量，引用索引时用colItem.index，避免默认变量名可能带来的冲突。

这样修改后，就能根据对话框中设置的列数，自动渲染对应数量的列，每列都会包含独立的parsys组件。

内容的提问来源于stack exchange，提问作者Variable