BJ

Что это?

Фреймворк для разработки одностраничных веб-приложений в терминах БЭМ.

Что дает?

• Компонентность
• Реактивность
• MVC

И все это вместе с методологией БЭМ с возможностью использования компонентных БЭМ библиотек, например, i-bem.

Живые примеры

TODO MVC (source)

Магазин (source)

Как подключить?

Порядок примерно такой:

• bh и создать его экземпляр (чтобы затем передать его в bj)
• underscore
• backbone
• если используется БЕМ библиотека, то подлючить ее
• подключить bj

Собственно, главное, чтобы bj был правильно инициализирован, см. следующий пункт.

Пример

Инициализация приложения

Для того, чтобы все заработало нужно явно вызвать bj на domReady:

window.onload = {
    bj.init({
        // Bemjson приложения см. примеры ниже
        bemjson: myBemjson,
        // хеш моделей приложения
        models: {
            cart: cartModel,
            users: usersCollection
        },
        // адаптер, чтобы bj понимал, в какой библиотеке реализованы блоки
        // для i-bem:
        adapter: bj.adapters['i-bem'],
        // без i-bem
        adapter: bj.adapters.native,
        // bh/bemhtml шаблонизатор с описанными шаблонами приложения
        templateEngine: bemhtml
    });
};

API

Вся суть BJ - добавление ключевых слов в plain bemjson.

bind

var bh = new BH();

bh.match('header', function(ctx) {
    ctx.tag('header');
});


var App = Backbone.Model.extend({
    defaults: {
        text: 'hello world'
    }
});

var app = new App();

window.onload = function() {
    bj.init({
        bemjson: [{
            block: 'header',
            bind: 'app',
            content: function(app) {
                return app.get('text');
            }
        }],
        models: {
            app: app
        },
        adapter: bj.adapters.native,
        templateEngine: bh
    });
};

Живой пример

showIf

var bh = new BH();

var App = Backbone.Model.extend({
    defaults: {
        timeSpent: 0
    }
});

var app = new App();

window.onload = function() {
    bj.init({
        bemjson: [{
            block: 'text',
            bind: 'app',
            showIf: function(app) {
                return app.get('timeSpent') > 3000;
            },
        models: {
            app: app
        },
        adapter: bj.adapters.native,
        templateEngine: bh
    });
};

События

var bh = new BH();

bh.match('input', function(ctx) {
    ctx.tag('input');
});

var App = Backbone.Model.extend({
    defaults: {
        username: null
    }
});

var app = new App();

window.onload = function() {
    bj.init({
        bemjson: [{
            block: 'input',
            onKeyup: function(e) {
                app.set('username', e.target.value);
            }
        // hr временный костыль изза того что after реализован как outerHTML += header :)
        }, {
            block: 'hr',
            tag: 'hr'
        }, {
            block: 'header',
            bind: 'app',
            content: function(app) {
                var username = app.get('username')
                if (username) {
                    return 'Привет, ' + username + '!';
                } else {
                    return '';
                }
            }
        }],
        models: {
            app: app
        },
        adapter: bj.adapters.native,
        templateEngine: bh
    });
};

Живой пример

repaint

Если хочется, чтобы блок отрисовался и больше никогда не перерисовывался.

Это нужно, если блок сам хочет себя как-то перерисовывать (читай legacy).

var myBemjson = [
    {
        block: 'header',
        bind: 'someModel',
        // не будет перерисовываться при изменении `somModel`
        repaint: false,
        content: function() {
            return Math.random();
        }
    }
];

Итерации

var bh = new BH();

var List = Backbone.Collection.extend();
var Item = Backbone.Model.extend({
    initialize: function(text) {
        this.set('text', text);
    }
});

var list = new List([
    new Item('one'),
    new Item('two'),
    new Item('three'),
    new Item('four')
]);

setTimeout(function() {
    list.add(new Item('FIVE!'));
}, 1000);

window.onload = function() {
    bj.init({
        bemjson: {
            block: 'list',
            content: {
                block: 'item',
                iterate: 'item in list',
                bind: 'item',
                content: function(item) {
                    return item.get('text');
                }
            }
        },
        models: {
            list: list
        },
        adapter: bj.adapters.native,
        templateEngine: bh
    });
};

Живой пример

с i-bem и без i-bem

Для BJ нет особой разницы, как реализованы блоки. BJ работает в контексте bemjson, как bemjson будет распарсен шаблонизатором, он не знает. Также он не знает, как блок реализован. То есть будь то b-form-input из какой-то bem библиотеки или paper-checkbox, сделаный на веб-компонентах - все равно. Главно подключить правильный адаптер.