почему дополнительный div рендерит при рендеринге представления в backbone.js - PullRequest
Новая
       27

почему дополнительный div рендерит при рендеринге представления в backbone.js

4 голосов
/ 25 июня 2011

почему дополнительный div рендерит при рендеринге представления в 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);
}
});

при его получении рендеринг выглядит так: 

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

почему li вставляется вдив, как я должен остановить это?

Ответы [ 2 ]

7 голосов
/ 25 июня 2011

В этой строке: 

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

... вы устанавливаете содержимое this.el для вывода шаблона. Если каким-то образом переменная-член el уже была инициализирована как существующий элемент div, вы просто изменяете его содержимое, затем добавляете к #participant-window.

Возможно, попробуйте: 

this.el = $(this.template(this.model.toJSON())));
2 голосов
/ 30 июня 2011

Если вы не переопределите его, свойство el Backbone.View инициализируется в тег div.

Таким образом, $(this.el).html(this.template(this.model.toJSON())); поместит оцененный шаблон в тег div.

Из вашего примера кода похоже, что на самом деле вы хотите установить this.el в $("ul#participant-window").Тогда все, что вам нужно сделать в рендере, это 

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