Question

I have the following template:

<div class="row">
  <div></div>
  ....
</div>

and the following view:

    var TestView = Backbone.View.extend({
    tagName: "div",
    template: $("#tests_template"),
    initialize: function () {
        _.bindAll(this, 'clickbtn');
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
            ....
            {
      });

The problem is, it produces the following output:

<div><div class="row">...</div></div>

How do I get rid of the outer div? I tried removing the tagName property from the view but it still puts a div?

Answer 1

Change your template to get rid of the outer div:

<div></div>
  ....

Then, tell the view to create the div with a class name:

tagName: "div",
className: "row"

OR if you want to keep the current template, then tell the View which el to use (assuming it exists already some place on your page):

var testView = new TestView({el: $(".row")});

EDIT You asked if you can do this in the initializer? Sure, but you’d need to make sure that you hook the events:

initialize: function () {
    this.el = $(".row");
    this.delegateEvents();
    _.bindAll(this, 'clickbtn');
}

Honestly, though, the first two options are more de-coupled IMO.