A tartalomelrendezés fejlesztőjének egységesítenie kell a tartalomelrendezés által kapott adatok szerkezetét.
Ha minden adat megvan, a tartalomelrendezés egyszerűen megjelenítheti az összetevőt. Ha nincs meg minden adat, a tartalomelrendezésnek további lekérdezéseket kell végrehajtania. A tartalomelrendezés egyetlen esetben sem feltételezhet egy bizonyos adatformátumot, és nem kényszerítheti az adatokat a megjelenítendő formátumba.
Meg kell győződnie arról, hogy az összes várt adattal rendelkezik. Ha nincs meg minden szükséges adat, további lekérdezéseket kell végrehajtania. A következő mezők hiányozhatnak az adatokból:
A "fields" érték a hivatkozott mezőknél
Nagy méretű szövegmezők
Mivel a tartalomelrendezéseket meghatározott tartalomtípusokhoz tervezik, a tartalomelrendezés fejlesztője ismeri a szükséges mezők listáját. Ezen mezők mindegyikénél be kell olvasni az adatokat a tartalomelrendezés megjelenítéséhez. Két lehetőség közül választhat: vagy beolvassa a hiányzó adatokat, majd megjeleníti a tartalomelrendezést az összes adattal, vagy pedig azonnal megjeleníti a meglévő tartalomelrendezést, és utána olvassa be a hiányzó adatokat, hogy kitöltse az üres értékeket.
1. lehetőség: A hiányzó adatok beolvasása, majd az összes adatot tartalmazó tartalomelrendezés megjelenítése
Hozzon létre egy ígéretet a kívánt adatok lekéréséhez, majd akkor folytassa a megjelenítést, ha minden ígéretet visszakapott.
Például: a következő tartalomtípusokkal rendelkezünk, amelyek a megfelelő mezőket tartalmazzák:
starter-blog-author
mezők
starter-blog-author_name - szövegmező
starter-blog-author_bio - szövegmező
starter-blog-post
mezők
starter-blog-post_title - szövegmező
starter-blog-post_content - nagy méretű szövegmező
starter-blog-post_author - hivatkozás egy starter-blog-author elemre
A tartalomelrendezés a következő sablont tartalmazza a várt mezőértékek megjelenítéséhez:
{{#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}}
A tartalomelrendezést a következő lekérdezésekből származó adatokkal lehet meghívni:
Elemlekérdezés a következővel: "expand" - minden adat biztosított
/content/published/api/v1.1/items/{id}?expand=fields.starter-blog-post_author&channelToken=8dd714be0096ffaf0f7eb08f4ce5630f
Ezt az adatformátumot kell használni az összes érték sikeres kitöltéséhez a sablonban. Ha bármelyik másik lekérdezést használják, további műveletek szükségesek az adatok beolvasásához és ebbe a formátumba való konvertálásához.
"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": "..."
}
}
}Elemlekérdezés a következő nélkül: "expand" - hiányoznak a következő hivatkozott elemmezők: "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"
}
}SCIM-lekérdezés - hiányzik a "starter-blog-post_content" nagy méretű szövegmező, hiányoznak a következő hivatkozott elemmezők: "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"
}
}Ahhoz, hogy a megjelenítést a fenti lekérdezések bármelyike nélkül következetesen elvégezhesse, meg kell győződnie arról, hogy a tartalomelrendezésben lévő render.js fájl minden hivatkozott mezőt kibont, és hogy a nagy méretű szövegmezők is szerepelnek.
Ellenkező esetben újból meg kell ismételni a lekérdezést, kijavítani az adatokat, majd megjeleníteni az összes adatot.
Minta render() függvény:
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. lehetőség: Azonnali megjelenítés, utána a hiányzó adatok belolvasása az üres értékek kitöltéséhez
A teljesítmény javítása érdekében külön választhatja azokat az elemeket, amelyek nem szerepelhetnek, és egy második menetben jeleníti meg őket. Ehhez két Mustache-sablon szükséges: az elsővel elvégezhető a kezdeti megjelenítés, meghagyva azokat a "lyukakat", amelyeket majd a második megjelenítés során fog kitölteni, ha már minden adattal rendelkezik.
Ehhez úgy kell beállítani a Mustache-sablont, hogy több menetet támogasson: vagy külön sablont kell biztosítani a "lyukak" számára, vagy a modellnek a sablonbeli makrókat kell visszaadnia a tényleges értékek helyett. Bármelyik esetben "el kell rejtenie" ezeket a lyukakat mindaddig, amíg az adatokat be nem olvasta, majd ki kell töltenie azokkal a megfelelő mezőket, és a megfelelő felhasználói felületi animációk segítségével megjeleníteni őket, elkerülve, hogy az oldal túl sokat "ugráljon".