Question

I am using this.collection.each() to iterate through the collection fetched from the backend.

Problem: I notice that when I bind the reset event of the collection to the render method of the view in the initialize method and place a console.log() within this.collection.each, I see the console output as expected.

However, If I dont do the binding above, and simply use this.render() within initialize, the console.log() does not output anything. This seems really strange to me, can anyone provide an explaination?

I also placed a console.log(this.collection); just before the loop, and this always outputs the collection correctly! I was guessing that the collection has not been populated on initialization of the View, but that will cause console.log(this.collection); to not show anything.

This Works

SimilarPhotoListView = Backbone.View.extend({
    el: '#modal_similar_items',

    initialize: function() {
        this.collection.on('reset', this.render, this);
    },

    render: function() {
        console.log(this.collection);
        this.collection.each(function(photo, index) {
            console.log('hello');
        }, this);
        return this;
    }
});

This does not output from within this.collection.each()

SimilarPhotoListView = Backbone.View.extend({
    el: '#modal_similar_items',

    initialize: function() {
        this.render();
    },

    render: function() {
        console.log(this.collection);
        this.collection.each(function(photo, index) {
            console.log('hello');
        }, this);
        return this;
    }
});

Both classes are instantiated via:

renderSimilarPosts: function() {
    this.similarPhotoList = new SimilarPhotoCollection();
    this.similarPhotoListView = new SimilarPhotoListView({ collection: this.similarPhotoList });
    this.similarPhotoList.fetch({
        data: {post_id: this.model.id},
        processData: true
    });
}

Answer 1

When you initialize your view, this.similarPhotoList is an empty collection. Therefore, when you create your similarPhotoListView, you’re passing it an empty collection. similarPhotoListView.initialize calls render thus with an empty collection, all before the collection is populated by fetch.

The reason the first method works is because reset is triggered in collection.fetch. From the backbone source:

fetch:
...
    options.success = function(resp, status, xhr) {
            collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
            if (success) success(collection, resp);
          };
...