Adobe Experience Manager 6.2

Question

有谁有关于如何创建二维动态组件的最佳实践示例吗？例如，将js数据转换到表格中，你可以有x个列和y个行-具有动态输入类型，例如文本、数字、下拉列表。

var comparisonTableCarouselJSON = {
  tableColumns: [
    {
      columnData: [
        {
           cellType: "label", 
           text: "Test 3",
           richText: "",
           tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    }
  ]
}

Answer 1

从评论中，我了解到你想使用AEM作为无头CMS和React头。

方法1：将变成无头的推荐方法是use content fragments。您需要在片段中启用RTE Plugins。然后创建一个片段并创建表内容。然后，使用ComponentExporter可以导出model.json并由React head使用。

方法2:创建一个扩展aem core text component的表组件。aemcore文本包含所有需要的插件，因此您的自定义组件实际上将是空白的。aemcore使用扩展了ComponentExporter的Text Model。因此，您可以通过点击*/_jcr_content/*/table.model.json来使用表内容。这也很简单，因为涉及的编码非常少。

开发中的困难部分：以上两种方法都使用ComponentExporter，它在jackson的帮助下盲目地导出jcr内容。RTE的表格插件将内容保存为html。这意味着，生成的*.model.json将是一个html字符串。例如：

{"text": "<table><tbody><tr><th>Hello</th><th>World</th></tr></tbody></table>"}

在react端，您需要呈现为innerHtml，或者在React端使用HTML Parser来解析所需格式的内容。为了避免在FE中进行innerHtml/parsing，您需要构建一个自定义的Sling模型，该模型类似于扩展ComponentExporter的core Text。使用HTMLParser like Jsoup将HTML解析为DOM对象。根据您所需的json格式，创建一个包含所需字段的TableDTO。最后将jsoup解析器中的DOMElement映射到TableDTO中。ComponentExporter应导出自定义TableDTO。这样，您将得到一个从*.model.json导出的整洁的json。