BackboneJS - fetching collections from model

Question

I have a JSON file which basically looks like this:

[
 {
   "First" : [...]
 },

 {
   "Second" : [...]
 },

 {
   "Third" : [...]
 },
]

In my router i have:

this.totalCollection = new TotalCollection();
this.totalView = new TotalView({el:'#subContent', collection:this.totalCollection});

this.totalCollection.fetch({success: function(collection) {
   self.totalView.collection=collection;
   self.totalView.render();
}});

Now i have my Backbone Model:

define([
 "jquery",
 "backbone"
],

function($, Backbone) {
var TotalModel = Backbone.Model.extend({
    url: "/TotalCollection.json",

    initialize: function( opts ){
        this.first = new First();
        this.second = new Second();
        this.third = new Third();

        this.on( "change", this.fetchCollections, this );
    },

      fetchCollections: function(){
        this.first.reset( this.get( "First" ) );
        this.second.reset( this.get( "Second" ) );
        this.third.reset( this.get( "Third" ) );
      }
});

return TotalModel;
});

and my in my Backbone View i try to render the collection(s):

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

But I get the Error "First is not defined" - whats the issue here?

Stephen · Accepted Answer · 2013-12-18 16:56:03Z

1

Have you actually defined a variable 'First', 'Second' and 'Third'? Based on what you're showing here, there is nothing with that name. One would expect you to have a couple lines like..

var First = Backbone.Collection.extend({});
var Second = Backbone.Collection.extend({});
var Third = Backbone.Collection.extend({});

However you haven't provided anything like that, so my first assumption is that you just haven't defined it.

Per comments, this may be more what you need:

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

Then..

{{#each collection}}
    {{#each First}}
        /*---*/
    {{/each}}
{{/each}}

edited Dec 18, 2013 at 16:56

answered Dec 17, 2013 at 11:36

Stephen

5,4501 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SHT Over a year ago

ah ok, thats right :-) So should that be in the Model too? and should there be something inside the curly brackets { } ?

Stephen Over a year ago

Nothing should really be necessary inside of the curlies unless you're doing something special for each - otherwise you could just as easily say this.first = new Backbone.Collection() and it'd work just as well.

SHT Over a year ago

Ok great! Now I don't get any errors. So far so good, but still no data :s I added my fetch() to my question. Maybe there is something wrong with that?

Stephen Over a year ago

I think your best friend here would be lots of console.log statements to track the progress of data to your view. Breakpoints too - I'd set one on your render to see what data you have available.. The toJSON won't really understand how to unwrap the collections, so you may need to do some manual work there too. Sorry, gotta go to sleep considering is 430am :)

SHT Over a year ago

Ok, thanks for the help anyway! Did not expect it would be sooo difficult just to display some simple collections/json data in a view :-/

|

Collectives™ on Stack Overflow

BackboneJS - fetching collections from model

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related