CODEWITHSUNDEEP
javascriptbackbone.js
bertday
bertday

Reputation: 10971

Backbone.js: View not being rendered

I have a very basic Backbone view I'm trying to render, but for some reason nothing is showing up on screen. The code is:

var UserList = Backbone.View.extend({
    tagName: 'ul',
    id: 'user-list',
    initialize: function () {
        _.bindAll(this, 'render');
    },
    render: function () {
        console.log(this.$el.html());  // LOG #1
        this.$el.html('<li>Is this showing up?</li>');
        console.log(this.$el.html());  // LOG #2

    }
});

var userList = new UserList();
userList.render();

The first time I log the contents of the el it shows nothing, and the second time it has the right contents but nothing appears on screen. Can anyone think of why this would be happening? I know that the render function is firing and that this is properly bound to this.render. Also, this.$el is set to a valid jQuery object (defined in my HTML).

Upvotes: 0

Views: 100

Answers (1)

McGarnagle
McGarnagle

Reputation: 102793

Since you haven't specified an el on the view, it's not attached to the DOM anywhere. You need to explicitly attach it:

var userList = new UserList();
$("body").html(userList.render());

And also return a value from render:

render: function () {
    console.log(this.$el.html());  // LOG #1
    this.$el.html('<li>Is this showing up?</li>');
    console.log(this.$el.html());  // LOG #2
    return this.$el;
}

Fiddle

Upvotes: 2

Related Questions