Question

I’m trying to simply return what I request in PHP to JSON.
My problem is that each Stock is not yet completed.
Indeed, it is the “render” but “this.collection.models” is not yet completed because the request is not yet finished.

What should I do to correct this problem, wait until the request is finished so that the loop is done correctly.

Thank you in advance

var Article = Backbone.Model.extend({});

var Articles = Backbone.Collection.extend({
    model:Article,
    url: function() {
        return _BASE_URL+'/sync/getLastArticles';
    },
    initialize:function () {
        this.fetch();
    }
});

var ArticlesView = Backbone.View.extend({
    template:$('#articles').html(),

    initialize:function () {
        this.collection = new Articles();
        this.render();
    },

    render:function () {
        console.log(this.collection);
        var that = this;
        _.each(this.collection.models, function (item) {
            console.log(item);
        }, this);
    },

    renderArticle:function () {
        ;
    }
});

Answer 1

You render before the fetch is done. What you want to do, is to wait for the fetch to complete and then render. Now how would you get notification of when the fetch is done? You have 2 options:

The success function (Not recommended by me)

// ArticlesView
initialize: function() {
  _.bindAll(this); // Don't forget to BIND
  this.collection = new Articles();
  this.collection.fetch({
    success: this.render
  });
}

Now when the fetch has been successful, render is called. This however can cause scoping problems and Backbone.js offers a much nicer alternative to callback functions: events.

Event callback (prefer this)

// ArticlesView
initialize: function() {
  _.bindAll(this);
  this.collection = new Articles();
  this.collection.on('reset', this.render); // bind the reset event to render
  this.collection.fetch();
}