присоединение представлений backbone.js к существующим элементам и вставка el в DOM

Я реализую свое первое реальное приложение 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>

Это нормальный способ сделать это для статических просмотров на странице? т. е. есть только одно из этих воззрений, и оно не исчезнет ни при каких обстоятельствах. Или есть лучший способ? Я понимаю, что могут быть разные способы делать что-либо (например, в маршрутизаторе, в родительском представлении, при загрузке страницы и т. д.) в зависимости от того, как я использую представление, но сейчас я смотрю на начальную загрузку страницы. случай использования.

Спасибо

71
задан Ben Roberts 25 May 2012 в 00:04
поделиться