bem-json

Template engine for BEM

This is JavaScript template engine for BEM methodology (http://bem.github.com/bem-method/html/all.ru.html) and allows to write templates in the form of declarations on pure js.

###Template

BEM.JSON.decl('b-block', {
    onBlockfunction (ctx) {
        ctx.content({elem: 'item'});
    },
    onElem: {
        'item'function (ctx) {
            ctx.tag('h1').content('Hello world');
        }
    }
});

###Output json

console.log(BEM.JSON.build({block: 'b-block'}));
{
  "block": "b-block",
    "content": {
        "elem": "item",
        "tag": "h1",
        "content": "Hello world"
    }
}

###Output html

console.log(BEM.HTML.build({block: 'b-block'}));
<div class="b-block">
    <h1 class="b-block__item">Hello world</h1>
</div>

Returns Number for current block/element position

Checks if current block/element is first, returns Boolean

Checks if current block/element is last, returns Boolean

Returns block/element params

Sets block/element params, returns ctx

Returns block/element param

Sets block/element param, returns ctx

  • If force is true it overrides previous value. Otherwise it's not.

Returns block/element content

Set block/element content

  • If force is true it overrides previous value. Otherwise it's not.

Returns block/element mods (modifications) object

Set block/element modifications, return ctx

  • If force is true it overrides previous value. Otherwise it's not.

Return block/element modification value

Sets block/element modification value, returns ctx

  • If force is true it overrides previous value. Otherwise it's not.

Returns block/element html attribute value.

Set block/element html attribute value, returns ctx

  • If force is true it overrides previous value. Otherwise it's not.

Returns block/element html attributes.

Set block/element html attributes.

  • If force is true it overrides previous value. Otherwise it's not.

Returns block/element tag name

Sets block/element tag name, returns ctx

  • If force is true it overrides previous value. Otherwise it's not.

Returns additional (may be not BEM) css class for block/element

Sets additional (may be not BEM) css class for block/element

  • If force is true it overrides previous value. Otherwise it's not.

Returns mixed blocks/elements Array

Adds (mix) block/elements on current block/element, return ctx

  • If force is true it overrides previous value. Otherwise it adds mixed elements.

Returns js params (params, saved in onclick attribute and accessible in BEM.DOM)

Sets js params (params, saved in onclick attribute and accessible in BEM.DOM), returns ctx

Wraps content of block/element with other blocks/elements, returns ctx

Adds blocks/elements before current content, returns ctx

Adds blocks/elements after current content, returns ctx

Wrap block/element with other blocks/elements, returns ctx

Generates unique id, returns String

Stop execution of more basics declarations

Removes block/element

You can use these bundles:

  • json (data) → BEM.HTML.build → html
  • json (data) → BEM.JSON.build → bemjson → bemhtml → html
  • json (data) → BEM.XML.build → lego:xml → xsl → html