CODEWITHSUNDEEP
backbone.js
GijsjanB
GijsjanB

Reputation: 10044

Backbone.js: retrieving a collection from the server in PHP

I'm having a look at Backbone.js, but I'm stuck. The code until now is as simple as is possible, but I seem not to get it. I use Firebug and this.moments in the render of MomentsView is an object, but all the methods from a collection don't work (ie this.moments.get(1) doesn't work).

The code:

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

var Moments = Backbone.Collection.extend({
    model: Moment,
    url: 'moments',
    initialize: function() {
        this.fetch();
    }
});

var MomentsView = Backbone.View.extend({
    el: $('body'),
    initialize: function() {
        _.bindAll(this, 'render');

        this.moments = new Moments();
    },
    render: function() {
        _.each(this.moments, function(moment) {
            console.log(moment.get('id'));
        });

        return this;
    }
})

var momentsview = new MomentsView();
momentsview.render();

The (dummy) response from te server:

[{"id":"1","title":"this is the moment","description":"another descr","day":"12"},{"id":"2","title":"this is the mament","description":"onother dascr","day":"14"}]

The object has two models according to the DOM in Firebug, but the methods do not work. Does anybode have an idea how to get the collection to work in the view?

Upvotes: 3

Views: 915

Answers (2)

nrabinowitz
nrabinowitz

Reputation: 55678

The problem here is that you're fetching the data asynchronously when you initialize the MomentsView view, but you're calling momentsview.render() synchronously, right away. The data you're expecting hasn't come back from the server yet, so you'll run into problems. I believe this will work if you call render in a callback to be executed once fetch() is complete.

Also, I don't think you can call _.each(this.moments) - to iterate over a collection, use this.moments.each().

Upvotes: 1

Aito
Aito

Reputation: 6872

Try removing the '()' when instantiate the collection.

this.moments = new Moments;

Also, as it's an asynchronous call, bind the collection's 'change' event with the rendering.

I hope it helps you.

Upvotes: 0

Related Questions