i-bem

by Alex Baumgertner

HTML

<script src="https://raw.githubusercontent.com/ymaps/modules/0.0.15/modules.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/i-bem/i-bem.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/i-bem/__internal/i-bem__internal.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/inherit/inherit.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/identify/identify.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/next-tick/next-tick.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/objects/objects.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/functions/functions.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/events/events.vanilla.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/i-bem/__dom/i-bem__dom.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/i-bem/__dom/_init/i-bem__dom_init.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/jquery/__config/jquery__config.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2.0.0/common.blocks/loader/_type/loader_type_js.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/jquery/jquery.js"></script>
<script src="https://raw.githubusercontent.com/bem/bem-core/v2/common.blocks/dom/dom.js"></script>
<div class="my-block i-bem" data-bem='{ "my-block": { "name": "ya" } }'>>my-block, gray, but red when block js inited</div>

CSS

.my-block {
    background: gray;
}
.my-block_js_inited {
    background: red;
}

JavaScript

console.log(modules);
modules.define('i-bem__dom', function (provide, DOM) {

    console.log(DOM);

    DOM.decl('my-block', {
        onSetMod: {
            'js': {
                'inited': function () {
                    console.log(this)
                }
            }
        }
    });

    provide(DOM);

});