Documentatie

Multifield-container genereert lege HTML of dubbele blokken in Universal Editor

Last update: Wed Jun 03 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Een multifield container in Universele Redacteur voor Edge Delivery (xwalk/ xcom) geeft lege elementen van HTML terug of dupliceert blokprijsverhoging wanneer gevormd met een multi-getaxeerd containergebied. Migreer naar een container- en blokpatroon van items om dit probleem op te lossen.

Beschrijving description

Omgeving

  • Product: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Plaatsen
  • Scenario: Edge Delivery (xwalk/xcom) met Universele Redacteur

Probleem/symptomen

  • Items die met een container zijn geschreven, genereren de verwachte HTML-uitvoer niet, wat resulteert in lege <div> -elementen.
  • Als u meerdere velden toevoegt aan de component met meerdere velden, wordt een dubbel blok HTML voor één containerinstantie gerenderd.
  • Als u de editorweergave vernieuwt, worden tijdelijk dubbele blokken verwijderd, maar wordt de duplicatie opnieuw weergegeven na volgende bewerkingen.

Resolutie resolution

Voer de onderstaande stappen uit om het probleem op te lossen:

  1. Verwijder het multigetaxeerde containerveld uit het bestaande componentmodel om het genereren van dubbele of lege markeringen te stoppen.

  2. Houd eenvoudige velden zoals boven- en ondertekst in het blokmodel van de bovenliggende container om inhoud op layoutniveau te behouden.

  3. Maak een speciaal itemblokmodel en definieer afzonderlijke velden voor elk item, zoals tekst- of afbeeldingsvelden. Voorbeeld van blok- en containermodelstructuur:

    code language-none 
    {
      "definitions": [
        {
          "title": "Multifield Container",
          "id": "multifield-container-component",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-component",
                  "model": "multifield-container-component",
                  "filter": "multifield-container-component"
                }
              }
            }
          }
        },
        {
          "title": "Multifield Container Item",
          "id": "multifield-container-item",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-item",
                  "model": "multifield-container-item"
                }
              }
            }
          }
        }
      ] ,
      "models": [
        {
          "id": "multifield-container-component",
          "fields": [
            {
              "component": "text",
              "name": "topText",
              "label": "Top of container",
              "valueType": "string"
            },
            {
              "component": "text",
              "name": "bottomText",
              "label": "Bottom of container",
              "valueType": "string"
            }
          ]
        },
        {
          "id": "multifield-container-item",
          "fields": [
            {
              "component": "text",
              "name": "itemText",
              "label": "Item text",
              "valueType": "string"
            },
            {
              "component": "reference",
              "name": "itemImage",
              "label": "Item image",
              "valueType": "string",
              "multi": false
            },
            {
              "component": "text",
              "name": "itemImageAlt",
              "label": "Item image alt text",
              "valueType": "string"
            }
          ]
        }
      ] ,
      "filters": [
        {
          "id": "multifield-container-component",
          "components": [ "multifield-container-item"]
        }
      ]
    }

  4. Configureer filters in de Universal Editor om itemblokken onder het bovenliggende containerblok toe te staan. In dit voorbeeld zorgt het filter ervoor dat de container alleen itemblokken accepteert:

    code language-none 
    {      "id": "multifield-container-component",
  "components": [ "multifield-container-item"]
}

    De containerdefinitie moet naar dit filter verwijzen: "filter": "multifield-container-component" en het filter met id: "multifield-container-component" beperkt de container om alleen multifield-container-item te accepteren.

  5. Werk bovenliggende componenten bij door op meerdere velden gebaseerde geneste containers te vervangen door onderliggende bloksleuven die itemblokken accepteren.

  6. Voeg blokmanuscripten voor zowel container als puntblokken toe als de projectopstelling hen vereist.

  7. Bouw en stel de bijgewerkte modellen en de componenten door de standaardpijpleiding op.

  8. Inhoud opnieuw ontwerpen in de Universal Editor door één itemblok toe te voegen voor elk vereist item in het containerblok.

  9. Valideer de uitvoer om te bevestigen dat elk blok één keer wordt gerenderd en genereert schone, niet-gedupliceerde HTML.

ModelGedrag - het blokmodel van het Punt (multifield-container-punt)

  • Elk geschreven item maakt één blokinstantie met:

    • itemText (text)
    • itemImage (reference) - wordt doorgaans omgezet in een afbeelding wanneer het DAM-element waarnaar wordt verwezen een afbeelding is
    • itemImageAlt (text) - wordt gebruikt voor alternatieve afbeeldingstekst

Nota's:

  • De Universal Editor behandelt het multi-waardevolle containerveldpatroon (component: "container", multi: true ) als vroege toegang, wat leidt tot instabiele rendering en het blokkeren van duplicatie in Edge Delivery-omgevingen.
  • Als u multi: true instelt op multi: false , wordt dubbel werk voorkomen, maar wordt het schrijven beperkt tot één containeritem.
  • Als u een containerblok met itemblokken gebruikt, wordt dit uitgelijnd op ondersteunde Universal Editor-modellen en wordt een consistente, stabiele HTML-rendering gegarandeerd.

Gerelateerde lezing

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f