Question

I am using Backbone.js for my project.
Sorry, I am a Backbone newbie, therefore I may be missing something very trivial.

This is an HTML snippet:

<table id="notes" class="table">
    <thead>
        <tr><th>title</th><th>comment</th></tr>
    </thead>
    <tbody id="notesTableBody">
    </tbody>
</table>

And this is the Backbone code that it is supposed to “inject” HTML in that snippet:

App.view.NoteListView = Backbone.View.extend({

    el:"tbody#notesTableBody",

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }

});

For clarity, I haven’t pasted the NoteListItemView code because I don’t think it is relevant.

My problem is that the HTML code rendered by Backbone is as follows:

<table id="notes" class="table">
    <tbody id="notesTableBody">
    <tr><td>title 1</td><td>comment 1</td></tr>
    </tbody>
</table>

Basically Backbone removed the thead from the table.
I don’t understand why – how can I make sure Backbone doesn’t remove it?

Answer 1

Your NoteListView won’t write anything outside of its el (for example: http://jsfiddle.net/ambiguous/cFvX2/) so your problem is elsewhere.

My guess was that you were doing something equivalent to this:

var v = new App.view.NoteListView;
$('#notes').html(view.render().el);

and that will completely replace the content of the #notes table with just the <tbody> (i.e. NoteListView‘s el).

There are couple ways around your problem. You could just call render and ignore what it returns:

var v = new App.view.NoteListView;
v.render();

That’s pretty much what my first demo fiddle did.

Or you could use id and tagName instead of el:

App.view.NoteListView = Backbone.View.extend({
    id: 'notesTableBody',
    tagName: 'tbody',
    initialize:function () {
        this.model.bind("reset", this.render, this);
    },
    render:function (eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }
});

and then append the view’s el to $('#notes'):

var v = new App.view.NoteListView;
$('#notes').append(v.render().el);

Demo: http://jsfiddle.net/ambiguous/HTAkM/

You could also let the caller specify the el:

App.view.NoteListView = Backbone.View.extend({
    initialize:function () {
        this.model.bind("reset", this.render, this);
    },
    render: function(eventName) {
        _.each(this.model.models, function (note) {
            $(this.el).append(new App.view.NoteListItemView({model:note}).render().el);
        }, this);
        return this;
    }
});

and then render into el without caring about render‘s return value:

var v = new App.view.NoteListView({ el: $('#notesTableBody') });
v.render();

Demo: http://jsfiddle.net/ambiguous/2Ptkp/

---

And while I’m here, you don’t need to $(this.el) anymore, recent versions of Backbone provide this.$el for your views:

$el view.$el

A cached jQuery (or Zepto) object for the view’s element. A handy reference instead of re-wrapping the DOM element all the time.

If your view is wrapping a collection, you should use this.collection instead of this.model:

new SomeView({ collection: some_collection })

Views treat the collection option specially just like model:

constructor / initialize new View([options])

[…] There are several special options that, if passed, will be attached directly to the view: model, collection, el, id, className, tagName and attributes.

Backbone collections also have several Underscore methods mixed in so you don’t need to say this:

_.each(some_collection.models, function(m) { ... });

you can call each right on the collection:

some_collection.each(function(m) { ... });

Also, if you’re binding to a "reset" event:

this.model.bind("reset", this.render, this);

you probably want your render to clear out the el before appending more things to it:

render: function() {
    this.$el.empty();
    this.collection.each(function(note) { ... });
}

If you don’t empty the el you’ll be adding more things to it when you probably mean to replace its contents with new things.