Что это?
Фреймворк для разработки одностраничных веб-приложений в терминах БЭМ.
И все это вместе с методологией БЭМ с возможностью использования компонентных БЭМ библиотек, например, i-bem.
Порядок примерно такой:
Собственно, главное, чтобы 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
});
};
Вся суть BJ - добавление ключевых слов в plain bemjson.
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
});
};
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
});
};
Если хочется, чтобы блок отрисовался и больше никогда не перерисовывался.
Это нужно, если блок сам хочет себя как-то перерисовывать (читай 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
});
};
Для BJ нет особой разницы, как реализованы блоки. BJ работает в контексте bemjson, как bemjson будет распарсен шаблонизатором, он не знает. Также он не знает, как блок реализован. То есть будь то b-form-input
из какой-то bem библиотеки или paper-checkbox
, сделаный на веб-компонентах - все равно. Главно подключить правильный адаптер.