3

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.

Rob Hruska
  • 118,520
  • 32
  • 167
  • 192
user1271518
  • 636
  • 1
  • 9
  • 25
  • possible duplicate of [Backbone, not "this.el" wrapping](http://stackoverflow.com/questions/11594961/backbone-not-this-el-wrapping) – Rob Hruska Jul 29 '12 at 15:42
  • 1
    It is a duplicate in content, but this post/title is much more search friendly for future users – Dennis Burton Jul 29 '12 at 16:14

1 Answers1

2

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.

Community
  • 1
  • 1
Dennis Burton
  • 3,282
  • 3
  • 23
  • 30
  • 1
    thanks for that, I gave up before and thought "WTF using one extra div is not a big deal! live with it" Will keep it for the future – Ahmad Alfy Jul 29 '12 at 11:54
  • Thanks. I have a modal inside the template which i want to show, i've noticed that in order for me to show the RIGHT view (it takes time, other wise i'll have an empty one), i've had to do something like: setInterval(function(){ view.show(); },1000); (after $(selector).append( view.render().$el );) Do you have any idea how to avoid doing this? thank you – user1271518 Jul 29 '12 at 14:32