Я реализую свое первое реальное приложение Backbone, не связанное с обучением, и у меня есть два вопроса об аспекте использования backbone.js, который меня не очень устраивает, а именно о внедрении отрендеренного представления el
в DOM по сравнению с использованием существующего элемента для el
. Я подозреваю, что предоставлю вам несколько «поучительных моментов» здесь и буду признателен за помощь.
Большинство примеров Backbone View, которые я встречал в сети, указывают tagName, id и/или className при создании View и, таким образом, создают el, который не привязан к DOM. Обычно они выглядят примерно так:
App.MyView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
...
},
render: function () {
$(this.el).html(<render an html template>);
return this;
}
});
Но туториалы не всегда объясняют, как они рекомендуют помещать отрендеренный el в DOM. Я видел это несколькими разными способами. Итак, мой первый вопрос: где подходящее место для вызова метода рендеринга представления и вставки его el в DOM? (не обязательно в одном и том же месте). Я видел, как это делается в маршрутизаторе, в функциях инициализации или рендеринга представления или просто в функции готовности документа корневого уровня. ( $(function ()
). Я могу себе представить, что любой из этих способов работает, но есть ли правильный способ сделать это?
Во-вторых, я начинаю с HTML-разметки/каркаса и конвертирую html в шаблоны js, соответствующие основным представлениям.Вместо того, чтобы позволить представлению отображать неприкрепленный элемент и предоставлять точку привязки в html, чтобы вставить его, я чувствую, что это более естественно, когда для представления будет только один элемент, и он не будет исчезать, использовать существующий пустой элемент-оболочку (часто это div
или span
) в качестве самого el
. Таким образом, мне не нужно беспокоиться о том, чтобы найти место в документе для вставки моего неприкрепленного el, который потенциально может выглядеть следующим образом (обратите внимание на дополнительные слои):
<div id="insert_the_el_in_here"> <!-- this is all that's in the original HTML doc -->
<div id="the_el"> <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
<!-- we're finally getting to some useful stuff in here -->
</div>
</div>
Итак, часть моего второго вопроса заключается в том, для в основном статическое представление, есть ли что-то неправильное в использовании существующего элемента из HTML-страницы непосредственно в качестве el
моего представления? Таким образом, я знаю, что он уже находится в DOM, в нужном месте, и этот вызов рендеринга немедленно отобразит представление на странице. Я бы добился этого, передав уже существующий элемент конструктору моего представления как «эль». Таким образом, мне кажется, мне не нужно беспокоиться о том, чтобы вставить его в DOM (что делает вопрос 1 спорным), а вызов рендеринга немедленно обновит DOM. Например.
<form>
<div someOtherStuff>
</div>
<span id="myView">
</span>
</form>
<script type="text/template" id = "myViewContents"> . . . </script>
<script type="application/javascript">
window.MyView = Backbone.View.extend( {
initialize: function () {
this.template = _.template($('#myViewContents').html());
this.render();
},
render: function () {
$(this.el).html(this.template());
return this;
}
});
$(function () {
window.myView = new MyView({ el: $('#myView').get(0) });
});
</script>
Это нормальный способ сделать это для статических просмотров на странице? т. е. есть только одно из этих воззрений, и оно не исчезнет ни при каких обстоятельствах. Или есть лучший способ? Я понимаю, что могут быть разные способы делать что-либо (например, в маршрутизаторе, в родительском представлении, при загрузке страницы и т. д.) в зависимости от того, как я использую представление, но сейчас я смотрю на начальную загрузку страницы. случай использования.
Спасибо