Question

I just started learning Backbone.js, and have been working on (what else) a simple to-do application. In this app, I want to display my to-do items inside of <ul id="unfinished-taks"></ul> with each task as a <li> element. So far, so simple.

According to the tutorials I have read, I should create a View with the following:

// todo.js
window.TodoView = Backbone.View.extend({
    tagName: 'li',
    className: 'task',
    // etc...
});

This works fine, but it seems like bad practice to define the HTML markup structure of my to-do item inside of my Javascript code. I’d much rather define the markup entirely in a template:

// todo.js
window.TodoView = Backbone.View.extend({
    template: _.template($("#template-task").html()),
    // etc...
});

<!-- todo.html -->
<script type="text/template" id="template-task">
    <li class="task <%= done ? 'done' : 'notdone' %>"><%= text %></li>
</script>

However, if I do it that way Backbone.js defaults to using tagName: 'div' and wraps all my to-do items in useless <div> tags. Is there a way to have the HTMl markup entirely contained within my template without adding unsemantic <div> tags around every view element?

Answer 1

If you are only planning to render the view once, you can set the el property of the view manually in .initialize():

// todo.js
window.TodoView = Backbone.View.extend({
    template: _.template($("#template-task").html()),

    initialize: function() {
        this.el = $(this.template(this.model.toJSON())).get(0);
    },

    // etc
});

There are some caveats here, though:

• Backbone expects the el property to be a single element. I’m not sure what will happen if your template has multiple elements at the root, but it probably won’t be what you expect.

• Re-rendering is difficult here, because re-rendering the template gives you a whole new DOM element, and you can’t use $(this.el).html() to update the existing element. So you have to somehow stick the new element into the spot of the old element, which isn’t easy, and probably involves logic you don’t want in .render().

These aren’t necessarily show-stoppers if your .render() function doesn’t need to use the template again (e.g. maybe you change the class and the text manually, with jQuery), or if you don’t need to re-render. But it’s going to be a pain if you’re expecting to use Backbone’s standard “re-render the template” approach for updating the view when the model changes.