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

Я реализую свое первое фактическое приложение, не относящееся к учебнику 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>

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

Спасибо

ОТВЕТЫ

Ответ 1

Нет абсолютно ничего плохого в идее привязки представления к существующему DOM node.

Вы можете даже просто поместить el в качестве свойства в своем представлении.

window.MyView = Backbone.View.extend( {
     el: '#myView',
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView();
});

Что я рекомендую, делайте то, что работает... Красота Магистраль - это то, что она гибкая и отвечает вашим потребностям.

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

Другим распространенным шаблоном в отношении инициализации является наличие своего рода объекта приложения для управления файлами...

var App = (function ($, Backbone, global) {
    var init = function () {
        global.myView = new myView();
    };

    return {
        init: init
    };
}(jQuery, Backbone, window));

$(function () {
    App.init();
});

Как я уже говорил раньше, действительно нет НЕПРАВИЛЬНОГО способа делать что-то, просто делайте то, что работает. :)

Не стесняйтесь ударить меня по twitter @jcreamer898, если вам нужна дополнительная помощь, также посмотрите @derickbailey, он вроде как гуру BB.

Удачи!

Ответ 2

Вы также можете отправить объект HTML DOM Element в представление как свойство 'el' для параметров.

window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView({
        el: document.getElementById('myView')
    });
});

Ответ 3

Использовать метод событий делегата:

initialize: function() {
    this.delegateEvents();
}

Чтобы понять, почему: http://backbonejs.org/docs/backbone.html#section-138 рядом "Установить обратные вызовы, где"

Ответ 4

Похоже, в наши дни вы можете setElement.