aem - 我们如何使用 SIGHTLY 为“select” html 标签动态填充下拉值（通过 js 文件）

Question

我们如何使用 SIGHTLY 为 html 标签动态填充下拉值（通过 js 文件）

Answer 1

<select data-sly-list="${itemList}">
  <option value="${item}">${item}</option>
</select>

Answer 2

Abie 的回答是正确的，但可能需要进一步解释：

<select data-sly-list="${itemList}">
  <option value="${item}">${item}</option>
</select>

Data-sly-list 在其范围内有一些默认值，在这种情况下，默认值 'item' 和 'itemList' 将用作变量和列表名称。您可以通过将它们添加到 data-sly-list 并替换“itemList”来定义自己的名称。

例如：

<select data-sly-list.child="${listOfChildren}">
  <option value="${child.name}">${child.description}</option>
</select>

更多信息可以在这里找到

如果您不想重命名它们，也可以使用“item”。