Backbone View says model is undefined?

Question

i'm trying to get my feet wet with Backbone, but I can't figure out what's wrong here:

var  ToDoApp = {
            model: Backbone.Model.extend({
                default:function(){
                    return {
                        task: '',
                        completed:false
                    }
                }
            }),
            collection: Backbone.Collection.extend({
                model: this.model
            }),
            view: Backbone.View.extend({
                model: new this.model(),
                tagName: 'li'
            })
        }
console.log(new ToDoApp.model());

I get an 'undefined is not a function' on the model for the view. What's going on?
Also, does the view even need to have a model there? Sorry if that's a really basic question, I still don't quite understand fully how backbone works.

score 1 · Accepted Answer · answered Sep 22 '13 at 22:29

1

This part:

collection: Backbone.Collection.extend({
    model: this.model
})

will be executed when you're building ToDoApp but this won't be ToDoApp at that time, this will probably be window and window won't have a model property. The result is that you're actually saying:

collection: Backbone.Collection.extend({
    model: undefined
})

Similar problems happen here:

view: Backbone.View.extend({
    model: new this.model(),
    tagName: 'li'
})

The easiest thing to do is build ToDoApp piece by piece:

var ToDoApp = { };
ToDoApp.model = Backbone.Model.extend({ ... });
ToDoApp.collection = Backbone.Collection.extend({
    model: ToDoApp.model
});
ToDoApp.view = Backbone.View.extend({
    tagName: 'li'
});

Then you'd create the model for you view instance when you create the view instance:

var model = new ToDoApp.model();
var view  = new ToDoApp.view({ model: model });

Also, using names like ToDoApp.Model, ToDoApp.Collection, and ToDoApp.View would be more common for your "classes".

answered Sep 22 '13 at 22:29

mu is too short

426,620
70
833
800

Ah okay, so having everything contained in that one statement would be a bad idea then? I wanted to try and make the application without going out of that first object declaration. – Caleb Lewis Sep 22 '13 at 22:37
Mostly. The specific problems for you are `ToDoApp.model` and `this` not being `ToDoApp` when you think it should be. You could move the `model = Backbone.Model.extend(...)` stuff outside the `ToDoApp` declaration but that's just hiding the problem. – mu is too short Sep 22 '13 at 22:43
Here is what i came up with :http://pastebin.com/t92rsGG2 What do you think of that? Would that be a good idea to use in a real world setting? – Caleb Lewis Sep 22 '13 at 23:03
Why must it all be in one statement? I tend to put each piece in a separate file and let my deployment system mash 'em all together. You've also create three accidental globals, assumed that `#todo-container` will be in the DOM when your JavaScript is loading, your `viewAll` should be using `this.collection` instead of `this.model`, and you can say `this.collection.each(...)` instead of `_.each(this.collection.toArray(), ...)`. You should at least familiarize yourself with [the documentation](http://backbonejs.org). – mu is too short Sep 22 '13 at 23:09

Backbone View says model is undefined?

1 Answers1