Я реализую свое первое фактическое приложение, не относящееся к учебнику Backbone, и задаю 2-ичные вопросы об аспекте использования backbone.js, который не очень хорошо подходит мне, что связано с введением визуализированного представления el в DOM против использования существующего элемента для el. Я подозреваю, что предоставим вам все "обучаемые моменты" здесь и ценю помощь.
Большинство примеров Backbone View, которые я вижу в Интернете, определяют имя тега, id и/или имя класса при создании представления и тем самым создают el, который не привязан к DOM. Они обычно выглядят примерно так:
App.MyView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
...
},
render: function () {
$(this.el).html(<render an html template>);
return this;
}
});
Но в учебниках не всегда есть возможность объяснить, как они рекомендуют получать рендеринг эль в DOM. Я видел это несколько разных способов. Итак, мой первый вопрос: где подходящее место для вызова метода визуализации и вставка его эла в DOM? (не обязательно одно и то же место). Я видел, как это делается в маршрутизаторе, в функции инициализации или рендеринга представления, или просто в режиме готовности к корневому уровню. ($(function ()). Я могу представить, что любая из этих работ, но есть ли правильный способ сделать это?
Во-вторых, я начинаю с некоторой разметки HTML/wireframe и конвертирует html-части в js-шаблоны, соответствующие представлениям на основе. Вместо того, чтобы позволить визуализировать непривязанный элемент и обеспечивать опорную точку в html, чтобы вставить его, я чувствую, что это более естественно, когда только один элемент для представления будет, и он не исчезнет, использовать существующий, опустошенный оберточный элемент (часто div или span) как сам el. Таким образом, мне не нужно беспокоиться о том, чтобы найти место в документе, чтобы вставить мой неприсоединившийся el, который потенциально может выглядеть так (обратите внимание на дополнительное расслоение):
<div id="insert_the_el_in_here"> <!-- this is all that 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, в нужном месте, и вызывающий рендер сразу же отобразит представление на странице. Я бы это сделал, передав уже exixting элемент в мой конструктор представлений как "el". Таким образом, мне кажется, мне не нужно беспокоиться о том, чтобы вставить его в DOM (задание 1-го типа), а вызов render немедленно обновит 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>
Является ли это хорошим способом сделать это для статических представлений на странице? т.е. есть только одно из этих взглядов, и оно никуда не исчезнет. Или есть лучший способ? Я понимаю, что могут быть разные способы сделать что-то (например, в маршрутизаторе, в родительском представлении, загрузке страницы и т.д.) На основе того, как я использую представление, но прямо сейчас я смотрю на начальную загрузку страницы использование случай.
Спасибо
