De ontwikkelaar van de inhoudlay-out moet de structuur van gegevens standaardiseren die door de inhoudlay-out worden ontvangen.
Als alle gegevens aanwezig zijn, kan met de inhoudlay-out eenvoudigweg de component worden weergegeven. Als niet alle gegevens aanwezig zijn, moeten mogelijk aanvullende zoekvragen worden gemaakt door de inhoudlay-out. In alle gevallen moet door de inhoudlay-out nooit een bepaalde gegevensopmaak worden aangenomen en moet in plaats daarvan een opmaak voor de gegevens worden afgedwongen die kan worden weergegeven.
U moet ervoor zorgen dat u alle gegevens hebt die u verwacht. Als de gegevens niet bestaan, moet u de nodige aanvullende zoekvragen maken. De volgende velden ontbreken mogelijk in de gegevens:
De ingang "fields" voor velden waarnaar wordt verwezen
Grote tekstvelden
Omdat inhoudlay-outs voor bepaalde inhoudtypen zijn ontworpen, kent de ontwikkelaar van een inhoudlay-out de lijst met benodigde velden. Voor elk van deze velden moeten de gegevens worden opgehaald zodat de inhoudlay-out kan worden weergegeven. U hebt twee opties: ontbrekende gegevens ophalen en vervolgens weergeven met volledige gegevens of onmiddellijk weergeven en vervolgens ontbrekende gegevens ophalen om de lege plekken in te vullen.
Optie 1: ontbrekende gegevens ophalen en vervolgens weergeven met volledige gegevens
Maak een Promise (toezegging) om de vereiste gegevens op te halen en ga vervolgens door met het weergeven wanneer alle Promises worden geretourneerd.
We hebben bijvoorbeeld de volgende inhoudtypen met bijbehorende velden:
starter-blog-author
velden
starter-blog-author_name: tekstveld
starter-blog-author_bio: tekstveld
starter-blog-post
velden
starter-blog-post_title: tekstveld
starter-blog-post_content: groot tekstveld
starter-blog-post_author: verwijzing naar een item starter-blog-author
De inhoudlay-out heeft de volgende sjabloon, om deze verwachte veldwaarden weer te geven:
{{#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}}
De inhoudlay-out kan worden aangeroepen met gegevens uit de volgende zoekvragen:
Itemzoekvraag met "expand": alle gegevens geleverd
/content/published/api/v1.1/items/{id}?expand=fields.starter-blog-post_author&channelToken=8dd714be0096ffaf0f7eb08f4ce5630f
Dit is de opmaak van de gegevens die is vereist voor het vullen van alle waarden in de sjabloon. Als een van de andere zoekvragen wordt gebruikt, is extra werk nodig om de gegevens op te halen en deze te transformeren naar deze opmaak.
"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": "..."
}
}
}Itemzoekvraag, zonder "expand": ontbrekende itemvelden waarnaar wordt verwezen "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-zoekvraag: ontbrekend groot tekstveld "starter-blog-post_content", ontbrekende itemvelden waarnaar wordt verwezen "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"
}
}Voor een consistente weergave met deze zoekvragen moet voor render.js van de inhoudlay-out worden gecontroleerd of alle velden waarnaar wordt verwezen zijn uitgevouwen en of de grote tekstvelden aanwezig zijn.
Anders moet hiervoor een zoekvraag worden uitgevoerd, moeten de gegevens worden gecorrigeerd en moet de weergave vervolgens worden uitgevoerd met de volledige gegevens.
Voorbeeldfunctie 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);
}
});
}Optie 2: onmiddellijk weergeven en vervolgens ontbrekende gegevens ophalen om lege plekken in te vullen
Prestaties kunnen worden verbeterd door de items te onderscheiden die mogelijk niet aanwezig zijn en deze in een tweede gang weer te geven. Hiervoor zijn twee Mustache-sjablonen vereist. De eerste sjabloon wordt gebruikt voor de initiële weergave, waarbij 'gaten' blijven zitten. Deze worden vervolgens ingevuld met de tweede weergave zodra de gegevens volledig opgehaald zijn.
Hiervoor moet de Mustache-sjabloon worden ingesteld op de ondersteuning van meerdere gangen, met behulp van afzonderlijke sjablonen voor de 'gaten' of door het model sjabloonmacro's te laten retourneren in plaats van werkelijke waarden. In beide gevallen moet u deze gaten 'verbergen' tot de gegevens worden opgehaald en ze vervolgens invullen en tonen met de juiste gebruikersinterface-animatie om te voorkomen dat de pagina te veel verspringt.