EN
Forum

Methodology

Toolbox

Platform

Context

A block instance methods are executed in the context of the block instance JS object. The keyword this in the block instance methods references the JS object of the block instance.

Static methods are executed in the context of the JS object that corresponds to the block class. The keyword this in a block static methods references the block class.

Note When developing blocks using i-bem.js in internal block methods that are not intended for use outside the block, it is customary to assign names that start with an underscore. For example, _onClick.

Properties of a block instance

With DOM representation

Without DOM representation

Helper properties

A block instance provides a set of helper properties:

Example

Calling staticMethod in the onEvent method of the my-block block instance.

BEMDOM.decl('my-block', {
    onEvent : function() {
        this.__self.staticMethod(); // calling a static method
        this.doMore();
    }
}, {
    staticMethod : function() { /* ... */ }; // defining a static method
});

Example

Calling the base implementation of the _onClick method of the button base class.

BEMDOM.decl({ block : 'my-button', baseBlock : 'button' }, {
    _onClick : function() {
        this.__base(); // calling the base _onClick
        this.doMore();
    }
});

Helper properties are provided by the inherit module, which implements the inheritance mechanism in bem-core.

Static block properties

Helper properties

Helper properties are available in the declaration of a block static methods:

BEMDOM.decl({ block : 'extra', baseBlock : 'my-block' },
    { /* ... */ },
    {
        staticMethod: function() {
            this.__base();
            this.doMore();
        }
    }
);

Static properties of the BEMDOM module

Rate the article
Report an error on GitHub or correct using prose.io.