i-bem.js example

github.com/bem/bem-core bem.info

by ilyar

HTML

<button class="button i-bem" data-bem="{&quot;button&quot;:{}}">Push me!</button>
<div class="console console_empty i-bem" data-bem="{&quot;console&quot;:{}}"></div>

<script src="http://rawgithub.com/ymaps/modules/0.0.15/modules.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/i-bem/__dom/i-bem__dom.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/jquery/jquery.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/loader/_type/loader_type_js.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/jquery/__config/jquery__config.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/objects/objects.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/functions/functions.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/dom/dom.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/i-bem/__dom/_init/i-bem__dom_init.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/i-bem/i-bem.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/i-bem/__internal/i-bem__internal.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/inherit/inherit.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/identify/identify.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/next-tick/next-tick.vanilla.js"></script>
<script src="http://rawgithub.com/bem/bem-core/v2/common.blocks/events/events.vanilla.js"></script>

CSS

.console
{
  border: 2px solid #a00;

  margin: 10px 0;
  padding: 5px;  
}

.console_empty
{
  border: 0;
  margin: 0;
  padding: 0;
}

JavaScript

modules.define(
    { block : 'button' }, 
    ['logger', 'i-bem__dom'], 
    function(provide, logger, BEMDOM) {
    
provide({
    _onClick : function() {
        logger.log('And then just touch me...'); 
    }
}, {
    live : function() {
        this.liveBindTo('click', function() {
            this._onClick();
        });
    }
});

});

modules.define(
    { block : 'console' }, 
    ['i-bem__internal', 'i-bem__dom', 'logger'],
    function(provide, INTERNAL, BEMDOM, logger) {

provide({
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._isEmpty = true;
                
                this.__self._build(this.domElem);
                
                logger.on('log', this._onLog, this);
            }
        },
        'empty' : {
            '' : function() {
                this._isEmpty = false;  
            }
        }
    },
    
    log : function(message) {
        this.elem('list').append(message + '<br/>');
        this._isEmpty && this.delMod('empty');
    },
    
    _onLog : function(e, data) {
        if(data == null)
            return;
        
        data.message && this.log(data.message);
    }
}, {
    live : false,
    
    _build : function(ctx) {
        BEMDOM.append(ctx, '<div class="' + 
            INTERNAL.buildClass(this.getName(), 'list') + '"></div>');
    }
});

});

modules.define(
    'logger', 
    ['inherit', 'events'], 
    function(provide, inherit, events) {

var Logger = inherit(events.Emitter, {
    log : function(message) {
        this.emit('log', { message : message });
    }
});

provide(new Logger());

});

modules.require(['i-bem__dom_init', 'jquery'], function(init, $) {

$(function() {
    init();
});

});