مجموعة العمود الفقري لا تحصل على النماذج

Question

في الأساس ، أحاول إرسال طلب الحصول على خادم العقدة الخاص بي ، حتى أتمكن من استعادة منشورات المدونة لإنشاء روابط. أنا أقوم ب collection.fetch, ، الذي يكمل طلب الحصول على طلب GET (سجلات خادم العقدة التي يرسلها الكائنات الصحيحة). يعمل النموذج على تحليل البيانات الصحيحة بنجاح ، لكن عندما أحاول استخدام المجموعة ، فإنه يقول إنه فارغ. هذا هو الرمز:

var mdm = mdm || {};

// MODEL
mdm.Post = Backbone.Model.extend({
        parse: function( response ) {
        response.id = response._id;
        console.log(response); // logs the two documents
        return response;
    }
});

// COLLECTION
mdm.Posts = Backbone.Collection.extend({
    model: mdm.Post,
    url: '/api/posts'
});

// MODEL VIEW
mdm.LinkView = Backbone.View.extend({
    template: _.template( $('#link_template').html() ),

    render: function() {
        this.$el.html( this.template( this.model.toJSON() ));
        return this;
    }
});

// COLLECTION VIEW
mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

    initialize: function() {
        this.collection = new mdm.Posts();
        this.collection.fetch({reset: true});
                // makes the request properly, but collection is empty
        this.render();
                // never gets called because the collection is empty
        console.log(this.collection.length); 
                // logs a length of 0
    },

    render: function() {
        // renders collection
    }
});

$(function() {
    new mdm.LinksView();
});

يتم إرسال البيانات ويتم تحليلها في النماذج ، لذلك لست متأكدًا من أن المجموعة تنتهي فارغة. أي مساعدة سيكون موضع تقدير كبير.

Answer 1

السبب الأكثر ترجيحًا لعدم رؤية النماذج في وجهة نظرك هو أن العرض يحدث قبل عدم التزامن fetch اكتمل.

شيء مثل أدناه سيعمل بشكل أفضل:

mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

initialize: function() {
    this.collection = new mdm.Posts();
    this.listenTo(this.collection, 'reset', this.render);
    this.collection.fetch({reset: true});
}

الكود أعلاه يعين مستمعا ل reset حدث على collection وينفذ render الوظيفة عندما يحدث ذلك.

أيضا ، يمكنك المرور success و error معالجات في fetch واتصل بوظيفة العرض يدويًا أيضًا.

this.collection.fetch({
    success: _.bind(function() { 
        this.render(); }, this)
});

أتمنى أن يساعدك هذا!

Answer 2

في تعليق @fbynite ، كانت المشكلة مرتبطة بـ fetch كونها غير متزامنة. قمت بإجراء التغييرات التالية على عرض المجموعة ، وقامت بالخدعة:

initialize: function() {
    var self = this;
    this.collection = new mdm.Posts();
    this.collection.fetch({reset: true,
        success: function() {
            self.render();
            console.log(self.collection.length);
        }
    });
},

الرمز هو تعديل من برنامج تعليمي للعمود الفقري ، لذلك قد يواجه المستخدمون الآخرون مشكلة مماثلة. http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library-your-first-restful-backbone.js-app