如何在html / sight中迭代两个列表?

Question

我想创建一个清单，其中每个复选框旁边的标题/文本来自一个名称列表，每个相应复选框和标题下面的标题描述来自一个值列表。

第二个列表，值列表，看起来像这样:

['Apple', 'Orange', 'Grape', 'Melon']

我有一个清单，旁边的标题是完整的，但我很困惑如何在html中实现第二个列表的使用，它将存在于每个复选框下。

<div class="class1" data-sly-list.item="${model.titleList}"> 
<ul>
<li class="class2">
<label class="class3">
<input type="checkbox" name="check" value="${item.code}">
<span>${item.name}</span>
</label>
</li>
</ul>
</div>

我还在学习html，我将感谢任何帮助!

Answer 1

假设您使用的模型如下:

use(function () {
return {
titleList: ['Apple', 'Orange', 'Grape', 'Melon'],
descriptionList: ["This is an apple", "This is an orange", "This is a grape"]
};
});

那么你就可以利用itemList.index对第二个列表:

<sly data-sly-use.model="logic.js"></sly>
<div class="class1" data-sly-list.item="${model.titleList}"> 
<ul>
<li class="class2">
<label class="class3">
<input type="checkbox" name="check" value="${item}">
<span>${model.descriptionList[itemList.index]}</span>
</label>
</li>
</ul>

然而，我相信更好的方法是有一个合适的模型:

use(function () {
return {
items: [
{ title: "Apple", description: "This is an apple"},
{ title: "Orange", description: "This is an orange"},
{ title: "Grape", description: "This is a grape"},
{ title: "Melon", description: ""}]
};
});

并在不依赖于列表之间的弱耦合的情况下呈现它:

<sly data-sly-use.model="logic.js"></sly>
<div class="class1" data-sly-list.item="${model.items}"> 
<ul>
<li class="class2">
<label class="class3">
<input type="checkbox" name="check" value="${item.title}">
<span>${item.description}</span>
</label>
</li>
</ul>