Question

Can anyone tell me why this code would throw an “undefined is not a function” error at var myview = new view();? I’ve been looking all over and I’m pretty sure everything’s right.

router = Backbone.Router.extend({
    routes: {
        '/': 'project'
    },

    project: function() {

        projects = new models.Projects();

        var view = Backbone.View.extend({
            el: 'body' ,
            render : function() {
                $(this.el).empty().append(templates.Project({content : 'this works!' }));
                return this;
            }
        });
        console.log(view);
        /*
         * Output:
         * { [Function]
              extend: [Function],
              augment: [Function],
              toString: [Function],
              register: [Function],
              __super__: 
               { bind: [Function],
                 unbind: [Function],
                 trigger: [Function],
                 tagName: 'div',
                 '$': [Function],
                 initialize: [Function],
                 render: [Function],
                 remove: [Function],
                 make: [Function],
                 delegateEvents: [Function],
                 _configure: [Function],
                 _ensureElement: [Function],
                 html: [Function],
                 toString: [Function],
                 template: [Function] } }
        */
        var myview = new view();
        this.send(myview, {collection: projects});
    }
});

Answer 1

You need to use JQuery when you set the el:

var view = Backbone.View.extend({
        el: $('body'),
        render: function() {
            $(this.el).empty().append(templates.Project({content : 'this works!' }));
            return this;
        }
    });
var myview = new view();

Check out this answer for more info.