Question

I am learning backbone routes. I just built a small app using backbone. But the routes are not working. I am getting this error in console

Uncaught TypeError: Cannot read property 'el' of undefined

here is my code

$(function () {
/****************************/
var documents = [
    new Backbone.Model({
        title: 'Title One',
        content: 'This is content for JS module'
    }),
    new Backbone.Model({
        title: 'Title Two',
        content: 'Module Systems Module Systems Module Systems Module Systems Module Systems'
    })
];

var contentsView = Backbone.View.extend({
    tagName: 'ul',
    render: function () {
        _(this.collection).each(function (document) {
            this.$el.append(new DocumentListView({model: document}).render().el);
        }, this);
    }
});

var DocumentListView = Backbone.View.extend({
    tagName: 'li',
    render: function () {
        this.$el.html(this.model.get('title'));
        return this;
    }
});

var DocumentRouter = Backbone.Router.extend({
    routes: {
        'contents': 'contents'
    },
    contents: function () {
        $('body').html(new contentsView({collection: documents}).render().el);
    }
});

var router = new DocumentRouter();
Backbone.history.start();

router.navigate('contents', {trigger:true});
/****************************/
});

This is the line where above error occurs according to console message

$('body').html(new contentsView({collection: documents}).render().el);

how can I fix this problem?

Answer 1

You should return this from your contentsView render function.

var contentsView = Backbone.View.extend({
        tagName: 'ul',
        render: function () {
            _(this.collection).each(function (document) {
                this.$el.append(new DocumentListView({model: document}).render().el);
            }, this);
         return this;
        }
    });

And if you mean to append contentsview to body, use something like this
$(‘body’).append(new contentsView({collection: documents}).render().$el);

If contentsView is the only contents meant for the body tag, use a construct like this

var contentsView = Backbone.View.extend({
            el : 'body',
            tagName: 'ul',
            render: function () {
                _(this.collection).each(function (document) {
                    this.$el.append(new DocumentListView({model: document}).render().el);
                }, this);
             return this;
            }
        });
contentsView.render();