Я использую Handlebars.js в качестве инструмента для шаблонов для моего приложения Backbone.js. Мои функции рендеринга в моих представлениях обычно выглядят следующим образом:
var source = $("#round").html();
var template = Handlebars.compile(source);
var context = JSON.parse(JSON.stringify(this.model));
var html = template(context);
$(this.el).html(html);
return this;
Вышеприведенный пример добавляется к главному окну приложения через следующий код (это код, который вызывает вышеуказанный код):
$('div#round-container', this.el).append(roundView.render().el);
Шаблон My Handlebars обрабатывает все стили и макет, поэтому я оставляю элемент "el" в представлении пустым. Backbone.js автоматически добавляет окружающие теги div вокруг шаблона Handelbars. Я предполагаю, что это потому, что элемент "el" пуст. Есть ли способ предотвратить добавление окружающих тегов Div? Спасибо!
То, что происходит, this.el создается на лету, потому что оно никогда не было явно задано вами. У вас есть два варианта:
Вы должны указать элемент, который хотите создать, с помощью tagName, className и/или id, и позвольте создать его для вас.
В render вы должны установить this.el содержимое вашего шаблона руля. Таким образом, у вас будет this.el = $(template(context)).
Документы имеют расширенное объяснение - http://documentcloud.github.com/backbone/#View-el
Еще один простой способ - добавить дочерние элементы обработанного элемента вместо
$('div#round-container', this.el).append(roundView.render().el.childNodes);
Или добавьте html обработанного элемента, например:
$('div#round-container', this.el).append(roundView.render().el.html());