AEM 多字段 data-sly-repeat ${item} 不工作

Question

这让我抓狂 - 希望有人能帮助我。

我有一个名为 'books' 的多字段组件，只有一个文本字段：'title'.

似乎一切正常；对话框包含多字段然后我添加两个标题字段然后输入 'title1' 和 'title2'.

然后在 HTML 本身我去：

<div data-sly-repeat="${properties.books}">
  <p>${item}</p>
  <p>${itemList.index</p>
  <p>${item.title}</p>
</div>

我不明白的是，${item} 正确地给了我： {"title": "title1"} {"title": "title2"}

和 ${itemList.index} 正确地给我： 0 1

但是 ${item.title} 总是空白。我也尝试了 ${item["title"]} ，结果也是空白。

我在这里做错了什么？在绝望中，我考虑使用

<div data-title="${item}"></div>

然后使用 JS 处理 JSON object 但我真的不想那样做。

请有人帮忙！

Answer 1

看起来你的 books 属性是一个 JSON 数组字符串或一个多值属性，每个值都是一个 JSON 对象字符串；

解析属性的最简单方法是通过如下所示的 JS 模型：

You could simplify this script to match your specific case, I made it general to multi-value and non-multi-value string properties.

/path/to/your-component/model.js:

"use strict";
use(function () {

    // parse a JSON string property, including multivalued, returned as array
    function parseJson(prop){
        if(!prop) return [];
        var result =[];
        if(prop.constructor === Array){
            prop.forEach(function(item){
                result.push(JSON.parse(item));
            });
        }
        else {
            var parsed = JSON.parse(prop);
            if(parsed.constructor === Array){
                result = parsed;
            }
            else result = [parsed];
        }
        return result;

    }

    var $books = properties.get("books", java.lang.reflect.Array.newInstance(java.lang.String, 1));
    var books = parseJson($books);

    return {
        books: books
    }

});

/path/to/your-component/your-component.html:

<sly data-sly-use.model="model.js"/>
<div data-sly-repeat="${model.books}">
  <p>${item}</p>
  <p>${itemList.index</p>
  <p>${item.title}</p>
</div>

AEM 多字段 data-sly-repeat ${item} 不工作

AEM multifield data-sly-repeat ${item} not working

repeat

aem

sightly

htl