Как отображать и добавлять вложенные представления в Backbone.js

У меня есть настройка вложенного просмотра, которая может немного углубиться в мое приложение. Я мог бы придумать несколько способов инициализации, рендеринга и добавления подвидов, но мне интересно, что такое обычная практика.

Вот пара, о которой я подумал:

initialize : function () {

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

    this.$el.html(this.template());

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Плюсы: Вам не нужно беспокоиться о поддержание правильного порядка DOM с добавлением. Представления инициализируются на ранней стадии, поэтому в функции рендеринга не так уж много всего можно сделать одновременно.

Минусы: Вы вынуждены повторно делегировать события (), что может быть дорогостоящим? Функция рендеринга родительского представления захламлена всем рендерингом подпредставления, которое должно произойти? У вас нет возможности установить tagName элементов, поэтому шаблон должен поддерживать правильные имена тегов.

Другой способ:

initialize : function () {

},

render : function () {

    this.$el.empty();

    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});

    this.$el.append(this.subView1.render().el, this.subView2.render().el);
}

Плюсы: Вам не нужно повторно делегировать события. Вам не нужен шаблон, который просто содержит пустые заполнители, а ваши tagName возвращаются к определению представлением.

Минусы: Теперь вы должны убедиться, что добавили вещи в правильном порядке. Визуализация родительского представления по-прежнему загромождена визуализацией подпредставления.

С событием onRender:

initialize : function () {
    this.on('render', this.onRender);
    this.subView1 = new Subview({options});
    this.subView2 = new Subview({options});
},

render : function () {

    this.$el.html(this.template);

    //other stuff

    return this.trigger('render');
},

onRender : function () {

    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Плюсы: Логика подпредставления теперь отделена от метода представления render().

С событием onRender:

initialize : function () {
    this.on('render', this.onRender);
},

render : function () {

    this.$el.html(this.template);

    //other stuff

    return this.trigger('render');
},

onRender : function () {
    this.subView1 = new Subview();
    this.subView2 = new Subview();
    this.subView1.setElement('.some-el').render();
    this.subView2.setElement('.some-el').render();
}

Я как бы смешал и сопоставил кучу разных практик во всех этих примерах (очень жаль), но какие из них вы сохранишь или добавишь? и что бы вы не делали?

Краткое изложение практики:

• Создание подпредставлений в initialize или в render?
• Выполнение всех рендеринга подвидов логика в render или в onRender?
• Используйте setElement или append/appendTo?