Магистраль, а не упаковка "this.el"

Я широко использую шаблоны, и мне нравится использовать полностью содержащиеся шаблоны. Я хочу сказать, что я хочу видеть в коде шаблона все элементы DOM, включая корневой, например:

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

Но для чего нужна эталонка, есть шаблон вроде этого:

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

И определение корневого элемента и его атрибутов в JS-коде. То, что я считаю уродливым и запутанным.

Итак, любой хороший способ избежать моего Backbone View, чтобы обернуть мой шаблон дополнительным элементом DOM?

Я проверяю этот поток проблем: https://github.com/documentcloud/backbone/issues/546, и я понимаю, что нет официального способа сделать это.. но, возможно, вы можете порекомендовать мне не официальный путь.

Ответ 1

Вы можете воспользоваться view.setElement, чтобы отобразить полный шаблон и использовать его как элемент представления.

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

Два момента, которые вы должны учитывать:

setElement вызывает undelegateEvents, заботясь о событиях просмотра, но будьте осторожны, чтобы удалить все другие события, которые вы, возможно, установили сами.
setElement не вводит элемент в DOM, вы должны сами это обработать.

Тем не менее, ваше мнение может выглядеть так:

var FullTemplateView = Backbone.View.extend({

    render: function () {
        var html, $oldel = this.$el, $newel;

        html = /**however you build your html : by a template, hardcoded, ... **/;
        $newel = $(html);

        // rebind and replace the element in the view
        this.setElement($newel);

        // reinject the element in the DOM
        $oldel.replaceWith($newel);

        return this;
    }
});

И рабочий пример для игры с http://jsfiddle.net/gNBLV/7/

Ответ 2

Теперь вы можете также определить представление tagName как функцию и создать такой класс:

var MyView = Backbone.View.extend({
   template: '#my-template',
   tagName: function() {
     // inspect the template to retrieve the tag name
   },
   render: function() {
     // render the template and append its contents to the current element
   }
});

Здесь работает пример

Ответ 3

Backbone.Decarative.Views предоставляет вам альтернативный способ сделать это, без необходимости полагайтесь на setElement. Подробнее см. мой ответ здесь.