Задать вопрос
@Kraky

Минусы и плюсы такого способа рендеринга Backbone вьюх?

У меня есть вьюха-контейнер, отвечающая за табы, назовем её 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}

Вопрос:
Какие минусы есть у данного подхода и есть ли они вообще если мы будет использовать такой способ рендерига только в компонентах-конейнерах типа табов, селектор, элементов форм и т.д. ?
Спасибо.
  • Вопрос задан
  • 133 просмотра
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы