Backbone.js отключает перенос с помощью div в рендере

Question

У меня есть модель Пост и коллекция Постов.И хочу сделать форму со списком всех постов в <select id="multi" multiple="multiple">.Поэтому мне нужно сделать рендер PostView внутри моего #multi только с помощью этого шаблона:

<option value=""><%= title %></option>

Но, наконец, я завернул его в div.Есть ли решение не обернуть этот шаблон с <div>?

Answer 1

Если вы не определите el (или tagName) для представления (в классе или во время создания экземпляра), представление будет помещено в тег div. http://documentcloud.github.com/backbone/#View-el

var PostView = Backbone.View.extend({
  tagName: 'option'
});

UPDATE

Начиная с версии 0.9.0, Backbone имеет view.setElement (элемент), чтобы сделать это.

var PostView = Backbone.View.extend({
    initialize: function() {
        var template = _.template('<option value=""><%= title %></option>');
        var html = template({title: 'post'});
        this.setElement(html);
    }
});

Answer 2

Если вы не хотите, чтобы представление обернуло ваш HTML, вам придется сделать несколько вещей:

1. Заменить this.el полностью
2. Звоните delegateEvents по новой el

render: function(){
  var html = "some foo";
  this.el = html;
  this.delegateEvents(this.events);
}

Поскольку Backbone генерирует div или другой тег (в зависимости от настроек tagName для представления), его необходимо полностью заменить. Это легко сделать. Однако, когда вы делаете это, вы теряете объявленные события, потому что Backbone использует jQuery delegate под капотом, чтобы соединить их. Чтобы повторно включить объявленные события, позвоните по номеру delegateEvents и передайте объявления событий.

В результате ваш view.el будет тегом <option>, который вы хотите, и ничего более.

Answer 3

В версии 0.9.0 Backbone представил view.setElement(element) для выполнения этой операции.