Štandardizácia štruktúry dát pre rozloženie obsahu

Vývojár rozloženia obsahu musí štandardizovať štruktúru dát, ktorú prijme rozloženie obsahu.

Ak sú všetky dáta prítomné, rozloženie obsahu môže jednoducho vykresliť komponent. Ak nie sú všetky dáta prítomné, rozloženie obsahu pravdepodobne bude musieť vykonať dodatočné dopyty. Rozloženie obsahu by nikdy nemalo predpokladať formát dát. Namiesto toho musí vynútiť dáta do formátu, ktorý sa vykreslí.

Ubezpečte sa, že máte všetky dáta, ktoré očakávate. Ak dáta neexistujú, budete musieť vykonať dodatočné dopyty. V dátach pravdepodobne budú chýbať nasledujúce polia:

Záznam fields pre polia, na ktoré sa odkazuje
Veľké textové polia

Rozloženia obsahu sa navrhujú pre konkrétne typy obsahu, takže vývojár rozloženia obsahu pozná zoznam potrebných polí. Pre všetky tieto polia je potrebné vyvolať dáta, aby sa mohlo vykresliť rozloženie obsahu. Máte dve možnosti: vyvoláte chýbajúce dáta a potom vykreslíte pomocou úplných dát, alebo vykreslíte okamžite a potom vyvoláte chýbajúce dáta, ktoré sa doplnia do prázdnych polí.

1. možnosť: Vyvolanie chýbajúcich dát a následné vykreslenie pomocou úplných dát

Vytvorte prísľub na vyvolanie požadovaných dát a potom pokračujte s vykresľovaním, keď sa všetky prísľuby vrátia.

Máme napríklad nasledujúce typy obsahu so zodpovedajúcimi poľami:

starter-blog-author
- polia
  - starter-blog-author_name - textové pole
  - starter-blog-author_bio - textové pole
starter-blog-post
- polia
  - starter-blog-post_title - textové pole
  - starter-blog-post_content - veľké textové pole
  - starter-blog-post_author - referencia na položku starter-blog-author

Rozloženie obsahu má nasledujúcu šablónu na vykreslenie očakávaných hodnôt polí:

{{#fields}}
<div class="blog_container">
    <div class="blog-post-title">{{starter-blog-post_title}}</div>
    {{#starter-blog-post_author.fields}}
    <div class="blog-author-container">
        <div class="blog-author-details">
            <div class="blog-author-name">{{starter-blog-author_name}}</div>
            <div class="blog-author-bio">{{{starter-blog-author_bio}}}</div>
            <span class="more-from-author">More articles from this author</span>
        </div>
    </div>
    {{/starter-blog-post_author.fields}}
    <div class="blog-post-content">{{{starter-blog-post_content}}}</div>
</div>
{{/fields}}

Rozloženie obsahu možno volať pomocou dát z nasledujúcich dopytov:

Dopyt položky s výrazom "expand" - všetky dáta sú zadané
- /content/published/api/v1.1/items/{id}?expand=fields.starter-blog-post_author&channelToken=8dd714be0096ffaf0f7eb08f4ce5630f
- Toto je formát dát potrebný na úspešné vyplnenie všetkých hodnôt v šablóne. Ak sa použije niektorý z ostatných dopytov, vyžaduje sa dodatočná akcia na vyvolanie dát a ich konvertovanie do tohto formátu.
- ```
"fields": {    
    "starter-blog-post_title": "...",
    "starter-blog-post_summary": "...",
    "starter-blog-post_content": "...",
    "starter-blog-post_author": {
        "id": "CORE386C8733274240D0AB477C62271C2A02",
        "type": "Starter-Blog-Author"
        "fields": {
            "starter-blog-author_bio": "...",
            "starter-blog-author_name": "..."
        }
    }
}
```

Položka dopytu bez výrazu "expand" - chýbajú polia položky, na ktoré sa odkazuje, "starter-blog-post_author.fields":

/content/published/api/v1.1/items/{id}?channelToken=8dd714be0096ffaf0f7eb08f4ce5630f

"fields": {    
    "starter-blog-post_title": "...",
    "starter-blog-post_summary": "...",
    "starter-blog-post_content": "...",
    "starter-blog-post_author": {
        "id": "CORE386C8733274240D0AB477C62271C2A02",
        "type": "Starter-Blog-Author"
    }
}

Dopyt SCIM - chýba veľké textové pole "starter-blog-post_content", chýbajú polia položky, na ktoré sa odkazuje, "starter-blog-post_author.fields":
- /content/published/api/v1.1/items?q=(type eq "Starter-Blog-Post")&fields=ALL&channelToken=8dd714be0096ffaf0f7eb08f4ce5630f
- ```
"fields": {
    "starter-blog-post_title": "...",
    "starter-blog-post_summary": "...",
    "starter-blog-post_author": {
        "id": "CORE386C8733274240D0AB477C62271C2A02",
        "type": "Starter-Blog-Author"
    }
}
```

Ak chcete konzistentne vykresľovať pomocou ľubovoľného z týchto dopytov, súbor render.js z rozloženia obsahu musí zaistiť, aby všetky polia, na ktoré sa odkazuje, boli rozbalené a aby veľké textové polia boli prítomné.

V opačnom prípade musí vykonať dopyt, opraviť dáta a potom vykresliť pomocou úplných dát.

Vzorová funkcia render():

render: function (parentObj) {
    var self = this,
        template,
        contentClient = self.contentClient,
        content = self.contentItemData;

     var getRefItems = function (contentClient, ids) {
        // Calling getItems() with no "ids" returns all items.
        // If no items are requested, just return a resolved Promise.
        if (ids.length === 0) {
            return Promise.resolve({});
        } else {
            return contentClient.getItems({
                "ids": ids
            }); 
        }
     };
   
     var fetchIDs = [], // list of items to fetch
         referedFields = ['starter-blog-post_author'], // names of reference fields
         largeTextFields = ['starter-blog-post_content'], // large text fields in this asset
         fieldsData = content.fields;
     // See if we need to fetch any referenced fields
     referedFields.forEach(function (fieldName) {
         if(fieldsData[fieldName] && fieldsData[fieldName].fields) {
            // got data already, nothing else to do
         } else { 
             // fetch this item
             fetchIDs.push(fieldsData[fieldName].id);
         }
     });

     // See if we need to fetch any large text fields
     for(var i = 0; i < largeTextFields.length; i++) {
        if(!fieldsData[largeTextFields[i]]) {
           // need to fetch this content item directly to get all the large text fields
            fetchIDs.push(content.id);
            break;
        }
     }
    // now we have the IDs of all the content items we need to fetch, get them all before continuing
    getRefItems(contentClient, fetchIDs).then(function (referenceData) {
        var items = referenceData && referenceData.items || [];

        // add the data back in
        items.forEach(function (referencedItem){
            // check if it's the current item
            if(referencedItem.id === content.id) {
               // copy across the large text fields 
               largeTextFields.forEach(function (fieldName) {
                   fieldsData[fieldName] = referencedItem.fields[fieldName];
                });
            } else{
                // check for any referenced fields
                for (var i = 0; i < referedFields.length; i++) {
                    if(referencedItem.id === fieldsData[referedFields[i]].id){
                       // copy across the fields values
                       fieldsData[referedFields[i]].fields = referencedItem.fields;
                       break;
                    }
                }
            }
        });

        // now data is fixed up, we can continue as before
        try{
           // Mustache
           template = Mustache.render(templateHtml, content);

             if(template) {
                $(parentObj).append(template);
             }

        } catch (e) {            
            console.error(e.stack);
        }    
    });
}

2. možnosť: Okamžité vykreslenie a následné vyvolanie chýbajúcich dát na vyplnenie prázdnych polí

Výkon je možné zlepšiť oddelením položiek, ktoré pravdepodobne nie sú prítomné, a vykreslením pri druhom odovzdaní. Sú na to potrebné dve šablóny Mustache. Prvá vykoná počiatočné vykreslenie, pričom ponechá "medzery", ktoré sa vyplnia v druhom vykreslení, keď budú dáta úplné.

Šablónu Mustache je potrebné nastaviť tak, aby podporovala viacero odovzdaní. Dosiahnete to buď nastavením samostatných šablón pre "medzery", alebo nastavením modelu tak, aby vracal makrá šablón, nie konkrétne hodnoty. V oboch prípadoch je potrebné tieto medzery "skryť", až kým sa dáta nevyvolajú, a potom ich vyplniť a zobraziť s príslušnou animáciou používateľského rozhrania, aby ste sa vyhli príliš výraznému pohybu stránky.