bem-components-example.js

/*
    Реализация i-statefull-block 
    https://github.yandex-team.ru/Metrika/metrika-contrib/tree/master/blocks/common/i-statefull-block
*/

BEM.DOM.decl({block: 'stateful-parent', baseBlock: 'i-statefull-block'}, {
    onSetMod: {
        js: function () {
            this._model = BEM.blocks['m-parent'].create();
            this.setStateModel(this._model);

            this._statefulChild = this.findBlockInside('stateful-child');

            // actions subscribtion
            BEM.channel('stateful-parent').on(this.__self.RANDOM_NUM_CHANGE, this._onRandomChange, this);

            this.__base.apply(this, arguments);
        }
    },

    setInitialState: function () {
        // params passed from server
        var that = this,
            params = that.params;

        that._model.fetchData()
        .then(function (data) {
            that.setState(_.extend({}, params, data));
        })
        .fail(function (e) {
            console.error(e);
        });
    },

    onStateChange: function (state) {
        this._statefulChild.setState(state);
    },

    _onRandomChange: function (event, data) {
        this.setState(data);
    },

    destruct: function () {
        this._model.destruct();
        BEM.channel('stateful-parent').un(this.__self.RANDOM_NUM_CHANGE);
    }
}, {
    RANDOM_NUM_CHANGE: 'RANDOM_NUM_CHANGE'
});

BEM.DOM.decl({block: 'stateful-child', baseBlock: 'i-statefull-block'}, {
    onSetMod: {
        js: function () {
            this._model = BEM.blocks['m-child'].create();
            this.setStateModel(this._model);

            this._statelessChild = this.findBlockInside('stateless-child');
            this._statelessChild.on('click', this._onChildClick, this);

            this.__base.apply(this, arguments);
        }
    },

    setInitialState: function () {
        this.setState(this.params);
    },

    onStateChange: function (state) {
        this._statelessChild.render(state);
    },

    _onChildClick: function (event, data) {
        var actionName = BEM.blocks['stateful-parent'].RANDOM_NUM_CHANGE;

        // firing action
        BEM.channel('stateful-parent').trigger(actionName, data);
    },

    destruct: function () {
        this._model.destruct();
    }
});

BEM.DOM.decl('stateless-child', {
    onSetMod: {
        js: function () {
            var button = this.findBlockInside('button');

            button.on('click', this._onButtonClick, this);
        }
    },

    render: function (state) {
        // simplest case, need to be optimized in reality
        var html = BEM.blocks['i-content'].html({
            block: 'stateless-child',
            state: state
        }, html);

        BEM.blocks['i-content'].replace(this.domElem, html);
    },

    _onButtonClick: function () {
        this.trigger('click', {
            randomNum: Math.random()
        });
    }
});