BEM-extension for Backbone views

Bembone provides access to elements in terms of BEM, the management of their modifiers and modifiers of the block.

Usage

Include bem.backbone.js after backbone.js.

<article class="news" id="example">
    <header class="news__header">
        <h1 class="news__title"></h1>
        <time class="news__date"></time>
    </header>
    <div class="news__teaser"></div>
    <footer class="news__controlls">
        <a class="news__more" href=""></a>
        <span class="news__add-to-favorites"></span>
        <span class="news__rate"></span>
    </footer>
</article>

var NewsView = Backbone.BemView.extend({
    blockName: 'news'
});
var view = new NewsView({
    el: $('#example')
});

Examples

Set modifier to the block

view.setMod('importance', 'high')

<article class="news news_importance_high"></article>

Remove modifier from the block

view.removeMod('importance')

<article class="news"></article>

Get a block element

view.element('title')

<h1 class="news__title"></h1>

Set modifier to the element

view.element('title').setMod({
    size: 'big',
    bordered: 'yes'
})

<h1 class="news__title news__title_size_big news__title_bordered_yes"></h1>

Change an element modifier

view.element('title').setMod('size', 'small')

<h1 class="news__title news__title_size_small news__title_bordered_yes"></h1>

Remove modifier from the element

view.element('title').removeMod('bordered')

<h1 class="news__title news__title_size_small"></h1>