У меня есть три разных способа инициализации и рендеринга представления и его подзонов, и каждый из них имеет разные проблемы. Мне любопытно узнать, есть ли лучший способ решить все проблемы:
Сценарий первый:
Инициализировать дочерние элементы в родительской функции инициализации. Таким образом, не все застревает в рендере, так что на рендеринг меньше блокируется.
initialize : function () {
//parent init stuff
this.child = new Child();
},
render : function () {
this.$el.html(this.template());
this.child.render().appendTo(this.$('.container-placeholder');
}
Проблемы:
-
Самая большая проблема заключается в том, что вызов рендеринга родителя второй раз удалит все привязки событий childs. (Это связано с тем, как работает jQuery
$.html().) Это можно было бы смягчить, вызвав вместо негоthis.child.delegateEvents().render().appendTo(this.$el);, но затем первый и наиболее часто делающий ненужную работу. -
Добавляя дочерние элементы, вы вынуждаете функцию рендеринга иметь знания о структуре DOM родителей, чтобы получить требуемый заказ. Это означает, что изменение шаблона может потребовать обновления функции визуализации.
Сценарий второй:
Инициализируйте дочерние элементы родительского 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();
}
Проблемы:
-
Это означает, что теперь функция рендеринга также должна быть привязана ко всей логике инициализации.
-
Если я отредактирую состояние одного из дочерних представлений, а затем вызову render на родительском, будет сделан совершенно новый ребенок, и все его текущее состояние будет потеряно. Который также кажется, что это может привести к сбою в утечке памяти.
Действительно любопытно, чтобы ваши парни взяли на себя это. Какой сценарий вы бы использовали? или есть четвертый магический, который решает все эти проблемы?
Вы когда-нибудь отслеживали состояние рендеринга для представления? Скажите renderedBefore флаг? Кажется действительно сумасшедшим.
