i-bem.js test fiddle

by ilyar

HTML

<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-jquery/__inherit/i-jquery__inherit.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-jquery/__identify/i-jquery__identify.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-jquery/__is-empty-object/i-jquery__is-empty-object.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-jquery/__debounce/i-jquery__debounce.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-jquery/__observable/i-jquery__observable.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-bem/i-bem.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-bem/__internal/i-bem__internal.js"></script>
<script src="https://raw.github.com/bem/bem-bl/master/blocks-common/i-bem/__dom/i-bem__dom.js"></script>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>i-bem.js test page</title>
</head>
<body class="page i-bem" onclic="return { 'page' : {} }">
	
  <button class="button i-bem" onclick="return { 'button' : {} }">Push me!</button>
  <div class="logger-panel i-bem" onclick="return { 'logger-panel' : {} }"></div>
  
</body>
</html>

CSS

.page
{
  margin: 0;
  padding: 10px;
}

.logger-panel
{
  border: 2px solid #a00;

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

.logger-panel_empty_yes
{
  border: 0;
  margin: 0;
  padding: 0;
}

JavaScript

BEM.DOM.decl('button', {
  
  onSetMod : {
    
    'js' : {
      'inited' : function() {
        // dummy
      }
    }
    
  },
  
  _onClick : function() {
     BEM.blocks['logger'].log('And then just touch me...'); 
  }
  
}, {
 
  live : function() {
    
    this.liveBindTo('click', function() {
      this._onClick();
    });
    
  }
  
});


BEM.DOM.decl('logger-panel', {

  onSetMod : {
   
    'js' : {
      'inited' : function() {
        this._initialize();
        
        BEM.blocks['logger'].on('log', this._processMessage, this);
      }
    },
    
    'empty' : {
      '' : function() {
        this._isEmpty = false;  
      }
    }
    
  },
  
  newMessage : function(message) {
    this.elem('console').append(message + '<br/>');
    
    this._isEmpty && this.delMod('empty');
  },
  
  _initialize : function() {
    this._isEmpty = true;
    
    this.setMod('empty', 'yes');
    
    var cls = BEM.INTERNAL.buildClasses(this.__self.getName(), 'console');
    BEM.DOM.append(this.domElem, '<div class="' + cls + '"></div>"');
  },
  
  _processMessage : function(e, data) {
    if(data == null)
      return;
    data.message && this.newMessage(data.message);
  }
  
}, {
 
  live : false
  
});


BEM.decl('logger', {}, {
  
  log : function(msg) {
    this.trigger('log', { message: msg });
  }
  
});


$(function() {
  BEM.DOM.init();
});