Backbone js: как удалить лишний тег в представлении?

#jquery #backbone.js

Вопрос:

У меня есть следующий шаблон:

 <div class="row">
  <div></div>
  ....
</div>

и следующий вид:

     var TestView = Backbone.View.extend({
    tagName: "div",
    template: $("#tests_template"),
    initialize: function () {
        _.bindAll(this, 'clickbtn');
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
            ....
            {
      });

Проблема в том, что он выдает следующий вывод:

 <div><div class="row">...</div></div>

Как мне избавиться от внешнего div? Я попытался удалить свойство tagName из представления, но оно по-прежнему помещает div?

Ответ №1:

Измените свой шаблон, чтобы избавиться от внешнего div:

 <div></div>
  ....

Затем сообщите представлению создать div с именем класса:

 tagName: "div",
className: "row"

ИЛИ, если вы хотите сохранить текущий шаблон, укажите представление, которое el использовать (при условии, что оно уже существует в каком-то месте на вашей странице):

 var testView = new TestView({el: $(".row")});

РЕДАКТИРОВАТЬ Вы спросили, можете ли вы сделать это в инициализаторе? Конечно, но вам нужно убедиться, что вы подключаете события:

 initialize: function () {
    this.el = $(".row");
    this.delegateEvents();
    _.bindAll(this, 'clickbtn');
}

Честно говоря, первые два варианта более не связаны с IMO.

1. Есть ли возможность назначить его в инициализаторе? var testView = Backbone.View.extend({ el: $(‘.row’) и т. Д.?

2. Вы всегда можете установить this.el в инициализаторе, но к тому времени все события будут подключены, поэтому вам придется вызывать this.delegateEvents() (см. Правки). Если вы не хотите передавать его, вы всегда можете переопределить конструктор и сделать это там, прежде чем вызывать «super».

Ответ №2:

Другой вариант, который не требует изменения шаблона, — использовать SetElement

SetElement view.SetElement(элемент)

Если вы хотите применить представление Backbone к другому элементу DOM, используйте SetElement, который также создаст кэшированную ссылку $el и переместит делегированные события представления из старого элемента в новый.

Это позволит вам полностью обойти tagName . Вы можете оставить tagName вне определения вашего представления (в любом случае по умолчанию используется div). Вам также не нужно беспокоиться о ручном делегировании ваших событий или требовать, чтобы селектор элемента был известен заранее, как указано в ответе @Brian Genisio, хотя эти другие методы тоже будут работать.

 render: function () {
    this.setElement(this.template(this.model.toJSON()));
    return this;
}