I
I
Igor2017-01-25 20:07:34
backbone.js
Igor, 2017-01-25 20:07:34

Cons and pros of this way of rendering Backbone views?

I have a tab container view, let's call it TabsContainer. Inside this container, tab components are connected, initially passed as an array of objects to this container. I don't really like to constantly write constructions like:

this.$el.find('узел_компонента').html(component.render().el)
and component.setElement('узел_компонента').render().
So I started render()doing the following in the container method:
// 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;

And in the template, these views are displayed as simple strings:
// bb-templates/tabs/default-tabs-container.jade
.tabs__header
    #{head}

.tabs__content
    #{content}

Question:
What are the disadvantages of this approach and are there any if we use this rendering method only in container components such as tabs, selectors, form elements, etc. ?
Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
W
WordPress WooCommerce, 2017-08-11
@maxxannik

1. It is necessary to understand what type of request is interesting: category/term1,term2,term3 or category/term1+term2+term3
2. Next, write a form that will give mehod=GET & action which is formatted via JS based on the selected category composition.
Or item 2 can be done without a form at all. Just create a link. If you realize how requests are made in WP by category.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question