Τυποποίηση της δομής δεδομένων για μια διάταξη περιεχομένου

Επιλογή 1: Λήψη των δεδομένων που λείπουν και έπειτα απόδοση με τα ολοκληρωμένα δεδομένα

Δημιουργήστε μια υπόσχεση για ανάκτηση των απαιτούμενων δεδομένων και έπειτα συνεχίστε την απόδοση όταν επιστρέψουν όλες οι υποσχέσεις.

Για παράδειγμα, έχουμε τους ακόλουθους τύπους περιεχομένου με αντίστοιχα πεδία:

• starter-blog-author

  • πεδία

    • starter-blog-author_name - πεδίο κειμένου

    • starter-blog-author_bio - πεδίο κειμένου

• starter-blog-post

  • πεδία

    • starter-blog-post_title - πεδίο κειμένου

    • starter-blog-post_content - πεδίο μεγάλου κειμένου

    • starter-blog-post_author - αναφορά σε ένα στοιχείο starter-blog-author

Η Διάταξη περιεχομένου έχει το ακόλουθο πρότυπο για την απόδοση αυτών των αναμενόμενων τιμών πεδίων:

{{#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}}

Η Διάταξη περιεχομένου μπορεί να κληθεί με δεδομένα από τα ακόλουθα ερωτήματα:

• Ερώτημα στοιχείου με "expand" - παρέχονται όλα τα δεδομένα

  • /content/published/api/v1.1/items/{id}?expand=fields.starter-blog-post_author&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"
            "fields": {
                "starter-blog-author_bio": "...",
                "starter-blog-author_name": "..."
            }
        }
    }

• Ερώτημα στοιχείου, χωρίς "expand" - αναφερόμενα πεδία στοιχείων που λείπουν "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 - πεδίο μεγάλου κειμένου που λείπει "starter-blog-post_content", αναφερόμενα πεδία στοιχείων που λείπουν "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"
        }
    }

Για να μπορείτε να αποδίδετε με συνέπεια με οποιοδήποτε από αυτά τα ερωτήματα, το αρχείο render.js από τη διάταξη περιεχομένου πρέπει να εξασφαλίζει ότι όλα τα αναφερόμενα πεδία είναι εκτεταμένα και ότι τα πεδία μεγάλου κειμένου υπάρχουν.

Αν δεν ισχύει αυτό, πρέπει να υποβάλει ερώτημα για αυτά πάλι, να διορθώσει τα δεδομένα και έπειτα να αποδώσει με τα ολοκληρωμένα δεδομένα.

Δείγμα συνάρτησης 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: Απόδοση άμεσα και έπειτα λήψη των δεδομένων που λείπουν για να συμπληρωθούν τα κενά

Η απόδοση μπορεί να βελτιωθεί ξεχωρίζοντας τα στοιχεία που ίσως δεν υπάρχουν και αποδίδοντας αυτά σε ένα δεύτερο πέρασμα. Αυτό θα απαιτεί δύο πρότυπα Mustache, το πρώτο να εκτελέσει την αρχική απόδοση, αφήνοντας κενά που συμπληρώνονται στη συνέχεια με τη δεύτερη απόδοση όταν τα δεδομένα ολοκληρωθούν.

Αυτό απαιτεί ρύθμιση του προτύπου Mustache ώστε να υποστηρίζει πολλά περάσματα είτε έχοντας ξεχωριστά πρότυπα για τα κενά είτε έχοντας το μοντέλο να επιστρέφει μακροεντολές προτύπων αντί για πραγματικές τιμές. Σε κάθε περίπτωση, θα χρειαστεί να "αποκρύψετε" αυτά τα κενά μέχρι να ανακτηθούν τα δεδομένα και έπειτα να τα συμπληρώσετε και να τα εμφανίσετε με κατάλληλη κίνηση στο περιβάλλον εργασίας χρήστη για να αποφύγετε την "αναπήδηση" της σελίδας σε μεγάλο βαθμό.