Geek Answers Handbook

Why an additional div is displayed when m redering view in backbone.js

why an additional div is displayed when m redering 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 he gets this rendering as follows:

 <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?

+4
source share
2 answers

In this line:

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

... you set the contents of this.el to the output of the template. If somehow the member variable el already initialized as an existing div element, you simply change its contents and then add to #participant-window .

Perhaps try:

 this.el = $(this.template(this.model.toJSON())));
+7
source

If you do not override it, the Backbone.View el property is initialized with the div tag.

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

What you really want to do from your sample code looks to set this.el to $("ul#participant-window") . Then all you have to do in rendering is

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

More articles:


All Articles