i-bem.js: User's guide

i-bem.js: JavaScript framework for BEM

i-bem.js is a specialized JavaScript framework for web development using the BEM methodology.

i-bem.js makes it possible to:

• Develop a web interface in terms of blocks, elements, and modifiers.

• Describe a block logic in declarative style, as a set of states.

• Easily integrate JavaScript code with BEMHTML or BH templates and CSS in BEM style.

• Flexibly redefine the behavior of library blocks.

i-bem.js is not meant to replace the general-purpose framework, like jQuery.

What this document covers:

• Overview of the framework: its relationship to the BEM subject domain, and a summary of the framework modular structure, a template project, and assembly tools written using i-bem.js.

• Binding JS blocks to HTML — Markup for JS blocks in a page HTML code and the possible relationships of HTML elements to JS blocks.

• Block declaration — Syntax for describing JS blocks.

• Passing parameters — Passing parameters to a block instance and accessing block parameters from an instance.

• Working with the DOM tree — The API for working with DOM nodes of blocks: elements, dynamic changes to the DOM tree (using AJAX), and searching DOM nodes.

• Block states — Modifiers and triggers for state changes (setting modifiers).

• Events — The i-bem.js event model: DOM and BEM events and event delegation.

• Initialization — Initializing and deleting block instances; deferred and automatic initialization.

• Interaction of blocks — Calls from a block to other blocks and classes of blocks.

• Context — Private and static properties of a block. BEMDOM static properties.

• What next? — Links to documentation and supplemental materials.