Forum

Methodology

Toolbox

Platform

Community

Passing parameters to a block instance

Syntax for passing parameters

Block parameters are stored in the data-bem attribute of an HTML element, and are passed to the block at the time of initialization. Use parameters to control the behavior of a specific block instance that is bound to a given HTML element.

The value of the data-bem attribute must contain valid JSON describing a hash in the format:

  • key — {String}, name of the block.
  • value — {Object}, parameters of the block. If this instance of the block does not need parameters, specify an empty hash {}.
<div class="my-block i-bem" data-bem='{ "my-block": {} }'></div>

If an HTML element has multiple JS blocks bound to it, the value of the data-bem attribute must contain the parameters for each of them:

<div class="my-block another-block i-bem"
     data-bem='{ "my-block": {}, "another-block": {} }'></div>

Element parameters are passed via the data-bem attribute of the element DOM node. For example, you can pass parameters to the my-elem element in the my-block block like this:

<div class="my-block i-bem" data-bem='{ "my-block": {} }'>
    <div class="my-block__my-elem" data-bem='{ "my-block__my-elem": {} }'></div>
</div>

Specifying the block name in the parameters provides the following advantages:

  • Blocks are initialized faster, since the value of the class attribute doesn't have to be parsed.
  • Multiple blocks can be put on the same HTML element without having to multiply its attributes.

Accessing parameters from a block instance

You can access parameters from a block instance via the this.params field. Its value is a hash of parameters from the data-bem attribute of the block DOM element (this.domElem).

For example, you can access parameters of the my-block block like this:

<div class="my-block i-bem" data-bem='{ "my-block": { "foo" : "bar" } }'></div>
modules.define('my-block', ['i-bem__dom'], function(provide, BEMDOM) {

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                    console.log(this.params); // { foo : 'bar' }
                }
            }
        }
    }));

});

To get element parameters, use the elemParams method of the block instance. It accepts a string argument with the element name or its jQuery object. It returns a hash of element parameters.

<div class="my-block i-bem" data-bem='{ "my-block": {} }'>
    <div class="my-block__my-elem"
         data-bem='{ "my-block__my-elem": { "foo" : "bar" } }'></div>
</div>
modules.define('my-block', ['i-bem__dom'], function(provide, BEMDOM) {

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                        console.log(this.elemParams('my-elem')); // { foo : 'bar' }
                }
            }
        }
    }));

});
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.