What is it?

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', {
    onBlock: function (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>

API

ctx.pos()

Returns Number for current block/element position

ctx.isFirst()

Checks if current block/element is first, returns Boolean

ctx.isLast()

Checks if current block/element is last, returns Boolean

ctx.params()

Returns block/element params

ctx.params(blockParams)

Sets block/element params, returns ctx

ctx.param(paramName)

Returns block/element param

ctx.param(paramName, paramValue, [force=false], [needExtend=false])

Sets block/element param, returns ctx

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

ctx.content()

Returns block/element content

ctx.content(val, [force=false])

Set block/element content

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

ctx.mods()

Returns block/element mods (modifications) object

ctx.mods(val, [force=false])

Set block/element modifications, return ctx

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

ctx.mod(name)

Return block/element modification value

ctx.mod(name, [val], [force=false])

Sets block/element modification value, returns ctx

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

ctx.attr(name)

Returns block/element html attribute value.

ctx.attr(name, val, [force=false])

Set block/element html attribute value, returns ctx

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

ctx.attrs()

Returns block/element html attributes.

ctx.attrs(attributsObj, [force=false])

Set block/element html attributes.

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

ctx.tag()

Returns block/element tag name

ctx.tag(tagName, [force=false])

Sets block/element tag name, returns ctx

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

ctx.cls()

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

ctx.cls(val, [force=false])

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

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

ctx.mix()

Returns mixed blocks/elements Array

ctx.mix(mixArray, [force=false])

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

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

ctx.js()

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

ctx.js(val)

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

ctx.wrapContent(obj)

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

ctx.beforeContent(obj)

Adds blocks/elements before current content, returns ctx

ctx.afterContent(obj)

Adds blocks/elements after current content, returns ctx

ctx.wrap(obj)

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

ctx.generateId()

Generates unique id, returns String

ctx.stop()

Stop execution of more basics declarations

ctx.remove()

Removes block/element

How to use with bem-bl

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