bembone

Created: 2012-03-25 08:24
Updated: 2017-03-23 12:49

README.md

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>
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more