vitkarpov

jBlocks.define('counter', {
    events: {
        'click .js-inc': 'inc',
        'click .js-dec': 'dec'
    },

    methods: {
        oninit: function() {
            this._currentValue = Number(this.params.initialValue);
        },

vitkarpov

<div class="js-counter" data-component="сounter" data-props='{ "initialValue": 2 }'>
    <button class="js-inc">+</button>
    <button class="js-dec">-</button>
</div>

vitkarpov

// somewhere in my program, when DOM is ready...

var counter = jBlocks.get(document.querySelector('.js-counter'));

// use event to react on what happens during lifecycle
counter.on('changed', function() {
    console.log('hello, world!');
});

// ... when user clicks on inc button

vitkarpov

/**
 * <div class="block">
 *  <div class="block__foo">
 *    <div class="block__bar block__bar_green">
 *      <div class="another-block__bar"></div>
 *    </div>
 *    <div class="block block_cool"></div>
 *  </div>
 * </div>
 */

vitkarpov

span {
    display: inline-block;
	width: 10px;
	height: 10px;
	background: red;
}
.flex {
	display: flex;
}

vitkarpov

.wrapper {
	background: red;
}
.wrapper:after {
	content: '';
	display: table;
}

.inner {
  margin: 20px 0;

vitkarpov

function MyArray() {
  this._index = 0;
}

MyArray.prototype.push = function(v) {
  this[this._index++] = v;
} 

var arr = new MyArray();

vitkarpov

.wrapper {
	display: flex;
	justify-content: space-between;
}

.input {
	width: 100%;
	outline: 1px solid red;
	display: inline-block;
}

vitkarpov

.wrapper {
	display: flex;
	justify-content: space-between;
}

.input {
	width: 100%;
	outline: 1px solid red;
	display: inline-block;
}

vitkarpov

.wrapper:after {
	content: '';
	display: block;
	clear: both;
}

.input {
	overflow: hidden;
	outline: 1px solid red;
}