why extra div is render when m redering a view in backbone.js

Question

why extra div is render when m redering a view in backbone.js

Backbone.View.extend({
  template :_.template( 
        '<li id="user-<%=user.username%>" class="pp-entry group">'+
            '<img src="i/pp-pic-1.png" class="pp-pic" alt="" />'+
            '<span class="whisper-mode-on hide" title="Whisper mode on"></span>'+
            '<h6 class="pp-name"><%=user.firstname%>&nbsp; <%if(user.lastname!="null"){%><%=user.lastname%><%}%></h6>'+
            '<p id="chat-<%=user.username%>"class="pp-msg"></p>'+
        '</li>'), 
  initialize: function() {
    _.bindAll(this, 'render', 'close');
    this.model.bind('change', this.render);
    this.model.view = this;
  }, 
  // Re-render the contents of the User item.
  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));

                $("#participant-window").prepend(this.el);
}
});

when it is getting it is rendering like this :

<ul id="participant-window" class="scroll-pane" style="overflow: hidden; padding: 0px; width: 357px;">
<div>
<li id="user-ashutosh" class="pp-entry group" style="cursor: default;">
<img class="pp-pic" alt="" src="i/pp-pic-1.png">
<span class="whisper-mode-on hide" title="Whisper mode on"></span>
<h6 class="pp-name">Ashutosh&nbsp; </h6>
<p id="chat-ashutosh" class="pp-msg"></p>
</li>
</div>
</ul>

why li is inserted in a div how should i stop this ?

Answer 1

In this line:

$(this.el).html(this.template(this.model.toJSON()));

...you set the contents of this.el to the template output. If somehow the el member variable was already initialized as an existing div element, you're just changing it's contents, then appending to the #participant-window.

Perhaps try:

this.el = $(this.template(this.model.toJSON())));

Answer 2

Unless you override it a Backbone.View's el property is initialized to a div tag.

So $(this.el).html(this.template(this.model.toJSON())); will put the evaluated template into the div tag.

From your code sample it looks like what you actually want to do is to set this.el to $("ul#participant-window"). Then all you have to do in render is

render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
}