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())));