Question

这让我疯了 - 希望有人可以帮助我。

我有一个名为＆＃39; books＆＃39;的多字段组件。使用单个文本字段：＆＃39; title＆＃39;。

一切似乎都在起作用;对话框包含多字段，然后我添加两个标题字段，然后输入＆＃39; title1＆＃39;和＆＃39; title2＆＃39;。

然后在我自己的HTML中：

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

我不能得到的是，$ {item}正确地给了我： {＆＃34; title＆＃34;：＆＃34; title1＆＃34;} {＆＃34; title＆＃34;：＆＃34; title2＆＃34;}

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

但$ {item.title}一直空白。我也试过$ {item [＆＃34; title＆＃34;]}，这也是空白的。

我在这里做错了什么？在我的绝望中，我打算使用

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

然后使用JS处理JSON对象，但我真的不想这样做。

请有人帮忙！

Answer 1

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

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

您可以简化此脚本以匹配您的特定情况，我将其设置为多值和非多值字符串属性。

<强> /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多字段数据狡猾重复$ {item}无法正常工作

1 个答案: