How to avoid template wrapping with empty div in Backbone?

Question

When I create view backbone creates empty div-container if el is not set. Template (this.$el.html(this.template(this.model.toJSON()))) inserted in that div. How

Answer 1

For better or worse, in Backbone you are expected to use the el provided by the view, and tweak it to your liking with the tagName, className, id and attributes properties of that view.

The obvious problem with this approach is that you mix and match JS and HTML like there is no tomorrow. In my opinion, it is better to keep things nicely separated; the characteristics of the el should be specified along with the template.

In 2014, I have written a drop-in component which aims to solve the issue: Backbone.Declarative.Views. It's probably the most underrated of all my open-source stuff, but it does the job just fine.

How?

Include Backbone.Declarative.Views into your project. Then, put those el-defining properties into data attributes of your template.

Now, if your view has a template: "#my-template" property, its el is set up as

And that's it, really. For the full details, check out the docs.

Why data attributes?

Using data attributes solves the basic problem of keeping the HTML-related stuff in your HTML files and templates, and out of your Javascript. At the same time, this approach is fully compatible with the way things are usually done in Backbone.

Ie, all existing Backbone templates continue to work as they should, just as all those tagName definitions scattered throughout Javascript still get applied as usual. Conflicts with other Backbone extensions and plugins are avoided, and there is no need to change legacy code. That makes Backbone.Declarative.Views safe to include into virtually any project.