使用数据狡猾重复的AEM HTL循环

时间:2017-10-03 04:19:46

标签: aem sightly htl

<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进行了硬编码,但它仍然不会多次运行循环。不知道我在这里做错了什么。

提前致谢

3 个答案:

答案 0 :(得分:2)

在sightly中你只能使用sly-repeat或sly-list迭代一个集合。所以在这里改为直接使用ColNum,你将不得不做一个简单的集合。 请参阅:https://docs.adobe.com/docs/en/htl/docs/block-statements.html

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您似乎误解了data-sly-repeat的用途。您可以阅读their documentation以获得澄清。

两件事:

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

  2. 不是传递数字次来重复HTML,而是通过列表来迭代。为列表中的每个项目呈现html,${item}变量用于保存当前项目。

  3. 因此,您必须编写一些Java代码来将colNum转换为该大小的列表。

    例如,使用JS Use API。 (有关创建空可迭代数组的方法,请参阅this question

    "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>