У меня есть вьюха-контейнер, отвечающая за табы, назовем её
TabsContainer
. Внутри этого контейнера подключаются компоненты табов, изначально переданные как массив объектов в этот контейнер. Мне не очень нравится постоянно писать конструкции типа:
this.$el.find('узел_компонента').html(component.render().el)
и
component.setElement('узел_компонента').render()
.
Поэтому я начал в методе
render()
контейнера делать следующее:
// TabsContainer.js
import Backbone from 'backbone';
import _ from 'underscore';
import Tab from './Tab';
import TabModel from './TabModel';
import defaultTemplate from 'bb-templates/tabs/default-tabs-container.jade'
const TabsContainer = Backbone.View.extend({
template: defaultTemplate,
className: 'tabs',
tabs: [],
viewData: {},
_initializedTabs: [],
initialize: function(data) {
_.extend(this, data);
this.initializeTabs();
},
render: function() {
this.$el.html(this.template(
this.getViewData()
));
return this;
},
getViewData: function() {
return {
head: this.getHead(),
content: this.getContent(),
data: this.viewData
};
},
/**
* Инициализирует табы.
*/
initializeTabs: function() {
this.tabs.forEach(tab => {
this._initializedTabs.push(new Tab({model: new TabModel(tab)}));
});
},
/**
* Получает отрендеренные заголовки табов.
* @returns {Array}
*/
getHead: function() {
return this._initializedTabs.map(tab => tab.render().el);
},
/**
* Получает отрендеренный конент табов
* @returns {*}
*/
getContent: function() {
return this.initializeTabs.map(tab => tab.renderContent());
}
});
export default TabsContainer;
А в шаблоне эти вьюхи выводятся как простые строки:
// bb-templates/tabs/default-tabs-container.jade
.tabs__header
#{head}
.tabs__content
#{content}
Вопрос:
Какие минусы есть у данного подхода и есть ли они вообще если мы будет использовать такой способ рендерига только в компонентах-конейнерах типа табов, селектор, элементов форм и т.д. ?
Спасибо.