Can't get rid of the outer div of a backbone.js view

Question

I'm using Backbone 0.9.2 and I have a mustache template that uses twitter bootstrap and looks something like this:

<div class="modal hide something" id="something-modal">
...
</div>

I tried getting rid of the extra <div> that backbone adds because I want the view to be 1-to-1 as my template. My render function looks something like:

render: function(){

    var $content = $(this.template()),
          existing_spots = $content.find('.spots-list'),
          new_spot;

      this.collection.each(function (spot) {
          new_sweetspot = new SpotView({ model: spot });
          existing_spots.append(new_spot.render().el);
      });

      $content.find("[rel=tooltip]").tooltip();
      this.setElementsBindings($content);
      //this.$el.html($content).unwrap('div'); // didn't work!
      this.$el.html($content);
      console.log(this.$el); 
      return this;
    }

I know that by adding:

tagName: "div",
className: "modal",

I'll get rid of it, but I want the control of the view's elements to be of the template, not of the JS code.

this.SetElement will cause the list NOT to be updated (it'll be empty), this.$el = $content; won't work as well.

Answer 1

There was a good thread on this last week on SO.

Backbone, not "this.el" wrapping

tl;dr you can use setElement, but you really need to know when things happen in backbone to make sure everything is wired up correctly.