Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
Branch: master

Merge pull request #9 from wtfil/master

fixed proporty setting
latest commit 0393467485
@delfrrr authored
Failed to load latest commit information.
.bem
i-bem fixed proporty setting
README.md updated README.md, added API docs
package.json fixed proporty setting

README.md

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
Something went wrong with that request. Please try again.