Question

This seems pretty much as a standard use of a collection, but it doesnt work. I have the following code inside a document ready function:

$(function() {
  window.EventList = Backbone.Collection.extend({
    model: Event,
    url: '/events',
        parse: function(response) { // same result with or without parse function
      return _(response.rows).map(function(row) { return row.doc ;});
    }
  });         
  window.Events = new EventList;
  // throws Uncaught TypeError: Illegal constructor
  // Events.fetch();
});

I’ve tested with Chromium and Firefox, FF is more verbose:

this.model is not a constructor at Backbone.js line:570
[Break On This Error] model = new this.model(attrs, {collection: this}); 

What am I missing?

As a sidenote, I’m trying to follow Chris Storm’s tutorial/chain if you need a bit more context.

Relevant Software Versions:

• jQuery JavaScript Library v1.7.1
• Backbone.js 0.5.3
• Underscore.js 1.2.2
• Chromium 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10
• Firefox is 8.0, Ubuntu 11.10, 64 bits

Update: a little more debugging and I find that at the point the error is thrown, this.model has the value function Event() { [native code] } and calling new Event() throws more errors – TypeError. So what’s wrong with creating events?

Answer 1

Your problem is that you (and Chris Storm) have simply chosen a bad name for your model. There is already an Event in JavaScript (at least in a JavaScript that is wired up to a DOM); furthermore, you can’t call new Event() to create a DOM Event object, you’re supposed to use document.createEvent('Event').

Try renaming your Event to, say, CalendarEvent:

$(function() {
  window.CalendarEvent     = Backbone.Model.extend({});
  window.CalendarEventList = Backbone.Collection.extend({
    model: CalendarEvent,
    url: '/events',
    parse: function(response) {
      return _(response.rows).map(function(row) { return row.doc ;});
    }
  });         
  window.CalendarEvents = new CalendarEventList;
});