Adobe Experience Manager 6.2

Question

Есть ли у кого-нибудь лучший пример того, как создать динамический c компонент с двумя измерениями. Например, данные js в таблицу, где вы можете иметь x количество столбцов и y количество строк - с динамическими c типами ввода, например, текст, число, раскрывающийся список.

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 head.

Подход 1 : Рекомендованный способ превращения AEM в безголовую CMS - использовать фрагменты содержимого . Вам нужно будет включить RTE Plugins во фрагменте. Затем создайте фрагмент и создайте содержимое таблицы. Затем с помощью ComponentExporter модель. json может быть экспортирована и использована React head.

Подход 2: Создайте компонент таблицы, который расширяет aem основной текстовый компонент . В тексте aemcore есть все необходимые плагины, поэтому ваш пользовательский компонент будет практически пустым. Aemcore использует Текстовая модель , которая расширяет ComponentExporter. Таким образом, вы можете использовать содержимое таблицы, нажав */_jcr_content/*/table.model.json. Это опять легко, поскольку очень мало кода.

Сложная часть разработки: Оба вышеуказанных подхода используют ComponentExporter, который слепо экспортирует контент jcr с помощью Джексона. Плагин таблицы для RTE сохраняет содержимое как html. Это означает, что созданная * .model. json будет html строкой. Например, вот так:

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

И в конце реакции вам нужно будет либо выполнить рендеринг как внутренний Html, либо использовать анализатор HTML в конце реакции, проанализировать содержимое в нужном формате. Чтобы избежать innerHtml / синтаксического анализа в FE, вам необходимо создать собственную модель Sling, аналогичную core Text , которая расширяет ComponentExporter. Используйте HTMLParser, такой как Jsoup , для анализа строки HTML в объект DOM. Иметь TableDTO с необходимыми полями в соответствии с требуемым форматом json. И, наконец, отобразите элемент DOME из парсера jsoup в TableDTO. ComponentExporter должен экспортировать пользовательский TableDTO. Таким образом, вы получите аккуратный json, экспортированный из * .model. json