Standardizace struktury dat pro rozvržení obsahu

Vývojář rozvržení obsahu musí standardizovat strukturu dat, která rozvržení obsahu přijímá.

Pokud jsou k dispozici veškerá data, může rozvržení obsahu snadno generovat komponentu. Pokud však nejsou všechna data k dispozici, rozvržení obsahu bude možná nuceno učinit další dotazy. V každém případě by rozvržení obsahu nemělo nikdy předpokládat určitý formát dat a místo toho by mělo přinutit data k použití formátu, ve kterém budou generována.

Bude nutné se ujistit, že máte k dispozici všechna očekávaná data. Pokud data neexistují, bude třeba provést další dotazy. V datech budou možná chybět následující pole:

Položka "fields" pro odkazovaná pole
Velká textová pole

Vzhledem k tomu, že rozvržení obsahu jsou navržena pro konkrétní typy obsahu, vývojář rozvržení obsahu zná seznam potřebných polí. Pro každé z těchto polí je třeba načíst data, aby bylo možné generovat rozvržení obsahu. Máte dvě možnosti: načíst chybějící data a poté generovat s úplnými daty nebo okamžitě generovat a poté načíst chybějící data k vyplnění prázdných polí.

Možnost 1: Načtení chybějících dat a následné generování s úplnými daty

Vytvořte příslib pro načtení požadovaných dat a po vrácení všech příslibů pokračujte v generování.

Máme například následující typy obsahu s odpovídajícími poli:

starter-blog-author
- pole
  - starter-blog-author_name - textové pole
  - starter-blog-author_bio - textové pole
starter-blog-post
- pole
  - starter-blog-post_title - textové pole
  - starter-blog-post_content - velké textové pole
  - starter-blog-post_author - odkaz na položku starter-blog-author

Rozvržení obsahu má následující šablonu pro generování těchto očekávaných hodnot 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}}

Rozvržení obsahu lze volat pomocí dat z následujících dotazů:

Dotaz na položku s atributem "expand" - dodání všech dat
- /content/published/api/v1.1/items/{id}?expand=fields.starter-blog-post_author&channelToken=8dd714be0096ffaf0f7eb08f4ce5630f
- Toto je formát dat, který je vyžadován k úspěšnému naplnění všech hodnot v šabloně. Pokud je použit kterýkoli z ostatních dotazů, je nutné provést další kroky k načtení dat a k jejich převodu do tohoto 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": "..."
        }
    }
}
```

Dotaz na položku bez atributu "expand" - chybí pole odkazovaných položek "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"
    }
}

Dotaz SCIM - chybí velké textové pole "starter-blog-post_content" a pole odkazovaných položek "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"
    }
}
```

K zajištění konzistentního generování pomocí libovolného z těchto dotazů musí soubor render.js z rozvržení obsahu zajistit, aby byla všechna odkazovaná pole rozbalena a aby byla k dispozici velká textová pole.

Pokud tomu tak není, je třeba se na ně znovu dotázat, opravit data a poté generovat s úplnými daty.

Ukázka funkce 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);
        }    
    });
}

Možnost 2: Okamžité generování a následné načtení chybějících dat k vyplnění prázdných polí

Výkon lze zlepšit oddělením položek, které nemusí být k dispozici, a jejich generováním při druhém průchodu. To bude vyžadovat dvě šablony Mustache, první k provedení počátečního generování, které zanechá „mezery“, k jejichž zaplnění dojde při druhém generování, jakmile budou data úplná.

To vyžaduje nastavení šablony Mustache tak, aby podporovala více průchodů, a to buď tím, že budou k dispozici samostatné šablony pro „mezery“, nebo budou používána makra šablony pro návrat modelu místo skutečných hodnot. V obou případech budete muset tyto mezery „skrýt“, dokud nebudou načtena data, a poté je naplnit a zobrazit pomocí příslušné animace uživatelského rozhraní, aby stránka příliš „neposkakovala“.