Backbone.js Collection

Question

I am a newbie to Backbone.js. After reading a couple of tutorials as well as some documentation, I decided to try my hands on a simple blog app. The major issue I have is that I cannot seem to get my collections to display. The following is my code and I will appreciate any help.

var AppRouter = Backbone.Router.extend({
    routes: {
        ""  : "main",
        "posts" : "main",
        "posts/add" : "addPost",
        "posts/:id" : "postDetails"
    },

    initialize: function() {

    },

    main: function(){

        var mainview = new MainView();
    }

})

$(document).ready(function () {
    app = new AppRouter();
    Backbone.history.start();
});



// Model
var Post = Backbone.Model.extend({
    initialize: function() {

    }
});

// Collection
var PostCollection = Backbone.Collection.extend({
    model: Post,
    url:"http://local.host/spadmin/posts"
});

var MainView = Backbone.View.extend({
    'el':'#page',
    template: _.template($('#main-view').html()),

    initialize: function(){
        _.bindAll(this,'render','postsView');
        this.pageTitle = 'Blog Posts';
        this.posts = new PostCollection();
        this.posts.fetch({success:function(){

        }});

        this.render();
    },


    postsView: function(){
        if(typeof(this._postsView) === 'undefined'){
            this._postsView = new PostsView({collection: this.posts});
        }
        return this._postsView;
    },

    render: function() {
        this.$el.append(this.template(this));
        this.postsView().render();
    }

});



PostsView = Backbone.View.extend({
    el:'#posts',

    template:_.template($('#posts-view').html()),

    initialize: function(){
        _.bindAll(this,'render','appendPost');
        this.collection.bind('add',this.appendPost);
    },

    appendPost: function(post) {
      var postView = new PostItemView({model:post});
      this.$el.find('tbody').append(postView.render().el);
    },

    render:function () {
        this.$el.html('');
        this.$el.append(this.template(this));
        console.log(this.collection);
        _(this.collection).each(this.appendPost, this);
    }
});

PostItemView = Backbone.View.extend({
    tagName: 'tr',
    template:_.template($('#post-item').html()),

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

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

});

console.log in the PostView class came the following output;

d {length: 0, models: Array[0], _byId: Object, _byCid: Object, _callbacks: Object}
_byCid: Object
_byId: Object
_callbacks: Object
length: 3
models: Array[3]
__proto__: x

I think the problem I am having is the behaviour of the Collection fetch() I have been on days for hours and can't figure out what the problem is

Answer 1

I was able to figure out the problem and have decided to post here just so another person won't have to keep bashing their head like I did.

In the PostView view class I had to wrap the underscore .each within the collection.fetch() I noticed that the models were returned in the collection callback property. So what I did was to add the following;

  render:function () {
    this.$el.html('');
    this.$el.append(this.template(this));
    that = this;
    this.collection.fetch({success:function(collection, response){
        _(collection.models).each(that.appendPost, that);
    }});
    }

When I did a console.log, I can now see the following;

I hope this helps someone. I am still new to Backbone so I am not really talking about the ideal solution but if anyone has a better idea for any part of the code, I will appreciate the contribution.