Как обрабатывать инициализацию и рендеринг подвидов в Backbone.js?

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

Сценарий 1:

Инициализировать дочерние элементы в родительской функции инициализации. Таким образом, не все застревает при рендеринге, поэтому при рендеринге меньше блокировок.

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

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

    this.child.render().appendTo(this.$('.container-placeholder');
}

Проблемы:

• Самая большая проблема в том, что повторный вызов рендеринга родительского объекта удалит все привязки дочерних событий.(Это связано с тем, как работает jQuery $. Html () .) Это можно смягчить, вызвав this.child.delegateEvents (). Render (). AppendTo (this. $ El); , но в первом и наиболее частом случае вы делаете больше работы без надобности.

• Добавляя дочерние элементы, вы заставляете функцию рендеринга знать структуру родительской DOM, чтобы вы получили желаемый порядок. Это означает, что для изменения шаблона может потребоваться обновление функции рендеринга представления.

Сценарий 2:

Инициализируйте дочерние элементы в родительском initialize () по-прежнему, но вместо добавления используйте setElement (). DelegateEvents () , чтобы установить дочерний элемент в элемент в шаблоне родителей.

initialize : function () {

    //parent init stuff

    this.child = new Child();
},

render : function () {

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

    this.child.setElement(this.$('.placeholder-element')).delegateEvents().render();
}

Проблемы:

• Это делает delegateEvents () необходимым сейчас, что является небольшим недостатком по сравнению с тем, что он необходим только при последующих вызовах в первом сценарии.

Сценарий третий:

Вместо этого инициализируйте дочерние элементы в родительском методе render () .

initialize : function () {

    //parent init stuff
},

render : function () {

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

    this.child = new Child();

    this.child.appendTo($.('.container-placeholder').render();
}

Проблемы:

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

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

Действительно любопытно узнать, что думают ваши парни.Какой сценарий вы бы использовали? или есть четвертый волшебный, который решает все эти проблемы?

Вы когда-нибудь отслеживали состояние визуализации для View? Скажем, флаг renderedBefore ? Выглядит действительно дрянным.