Errors in building a BackboneJS Event Collection - new Event() throws errors
-
28-10-2019 - |
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?
Solution
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;
});