0 
<footer id="footer">
                <div class="container">
                    <div class="row double">
                        <div class="6u">
                            <div class="row collapse-at-2">
                                <div data-sly-repeat="${properties.colNum}" data-sly-unwrap>
                                <div class="6u">
                                    <h3>Accumsan</h3>
                                    <ul class="alt">
                                        <li><a href="#">Nascetur nunc varius</a></li>
                                        <li><a href="#">Vis faucibus sed tempor</a></li>
                                        <li><a href="#">Massa amet lobortis vel</a></li>
                                        <li><a href="#">Nascetur nunc varius</a></li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="6u">
                            <h2>Aliquam Interdum</h2>
                            <p>Blandit nunc tempor lobortis nunc non. Mi accumsan. Justo aliquet massa adipiscing cubilia eu accumsan id. Arcu accumsan faucibus vis ultricies adipiscing ornare ut. Mi accumsan justo aliquet.</p>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
                                <li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <ul class="copyright">
                        <li>&copy; Untitled. All rights reserved.</li>
                    </ul>
                </div>
            </footer>

我正在尝试使用 data-sly-repeat 进行循环，并且我已经验证 colNum 的值为 2，但循环仍然只运行一次。换句话说，无论值如何，它都不会循环。我还对值 3 进行了硬编码，但它仍然不会多次运行循环。不知道我在这里做错了什么。

提前致谢

4

3 回答 3

2

很明显，您只能使用 sly-repeat 或 sly-list 来迭代集合。因此，在这里，您必须直接使用 ColNum 而不是创建一个简单的集合。参考：https ://docs.adobe.com/docs/en/htl/docs/block-statements.html

于 2017-10-03T06:36:26.977 回答
0

data-sly-repeat需要一个可迭代的对象。您可以提供一个包含所需元素数量的虚拟数组，或者更好的是，提供一个包含有用内容的数组，例如列名或数据。

于 2017-10-03T04:33:36.420 回答
0

看来您误解了如何data-sly-repeat使用。您可以阅读他们的文档以获得澄清。

两件事情：

  1. data-sly-repeat重复被标记的整个元素，而data-sly-list只重复元素的内容。在您的情况下，它似乎list更合适..您可以消除div您当前正在展开的实际情况。

  2. 与其传递多次来重复 HTML，不如传递一个要迭代的事物列表。为列表中的每个项目呈现 html，${item}变量用于保存当前项目。

因此，您必须编写一些 Java 的 JS 代码才能将您colNum的列表变成那种大小的列表。

例如，使用JS 使用 API。（有关创建空可迭代数组的方法，请参阅此问题）

"use strict";
use(function () {
    let n = properties.get("colNum", 0);
    return {
        columns: [...Array(100)] // empty, iterable, array of size n
    };
});

并从 HTL 调用它。请注意，我删除了多余的内容div，并正在使用data-sly-list循环n空元素的长度数组

<div class="row collapse-at-2"
     data-sly-use.config="<JS-file-name>"
     data-sly-list="${config.columns}">
    <div class="6u">
        <h3>Accumsan</h3>
        <ul class="alt">
            <li><a href="#">Nascetur nunc varius</a></li>
            <li><a href="#">Vis faucibus sed tempor</a></li>
            <li><a href="#">Massa amet lobortis vel</a></li>
            <li><a href="#">Nascetur nunc varius</a></li>
        </ul>
    </div>
</div>
于 2017-10-09T13:48:57.743 回答