Forum

Methodology

Toolbox

Platform

Community

Interaction of blocks

In the scope of the BEM methodology, blocks should be developed in a way that minimizes their dependency on each others' states. However, the ideal of fully independent blocks is not achievable in practice.

Block interaction can be implemented in the following ways:

  • By subscribing to BEM events on other block instances or subscribing to delegated BEM events.
  • By directly calling methods of other block instances or static methods of another block class.
  • By checking the states of one of the blocks.
  • Through event channels (for example, using the channels element in the events block).

Note: Don't use DOM events for arranging interaction between blocks. DOM events are intended only for implementing internal procedures of a block.

The following i-bem.js APIs are provided for implementing interaction between blocks:

Access to block classes

You can get JS components corresponding to block classes via the module system. This is also true for blocks without DOM representation.

Access to block classes is needed for:

Example: Calling the close static method for the popup block will close all popups on the page.

modules.define('switch', ['i-bem__dom', 'popup'], function(provide, BEMDOM, Popup) {

    provide(BEMDOM.decl(this.name,
        {
            onSetMod : {
                'popup' : {
                    'disabled' : function() {
                        Popup.close();
                    }
                }
            }
        }
    ));

});
If you notice a mistake or want something to supplement the article, you can always write to us at GitHub, or correct an article using prose.io.