Create a brick

1. Create a brick
2. Options and methods * html * build * data * add
3. Interpolation * computed properties * advances expressions * filters * partials
4. Data-binding

Create a brick

A brick is basically a piece of Ui that the user will see on his screen. Its API is really straightforward and is as simple as the example below:

var brick = require('brick');

var view = brick();

See the full list of options and methods

A brick basically render a DOM element from its data and keep them both in sync. When the data changes the DOM element update itself and vice versa.

var view = brick('<div class="github {{repo}}">{{maple}}</div>', {
    repo: 'brick',
    github: 'bredele'
  });

//compile and insert
view.build(document.body);

view.set('repo','brick-examples');

With brick you can control the life cycle of your DOM element (through methods and hooks), extend the template engine by creating new filters, directive or partials and add data-bindings to listen events, hide/show, create lists and way more. Really it has never been so easy!

Options and methods

html

view.html(tmpl)

• tmpl: String or HTMLElement

emit rendered event

Render and initialize DOM element.The result is available under view.el.

Variable substitution ({{var}}) and bindings are applied only when inserted into the document (method el).

build

view.el([node , bool])

• node: optional HTMLElement anchor (parent element)
• bool: optional Boolean

emit compiled event

Compile (apply bindings and interpolation) and place DOM element into parent element. If the second argument is true, the view will only apply bindings (no interpolation).

data

view.data(data)

• data: Object or Store

brick inherits from Store.

add

view.plug(name, plugin)

• name: Object or String
• plugin: Function or Object

Extend the HTML syntax of your view by creating new attributes (aka brick/data-binding).

  //listen clik and execute handler
  <button on-click="handler> my button </button>

Every plugins are executed in the compilation time.

Like jQuery you can create your own plugins : it's as easy as creating a function. See plugin for more information.

Using data binding allows a better separation of concerns. You code is more configurable and so, more maintainable. Moreover, you don't need to use query selection anymore.

Interpolation

Variable interpolation is a simple way to set the content of a DOM node with a data variable. Your HTML stays up-to-date when the underlying data changes.

  <ul>
    <li class="{{repo}}">
      <a href="http://github.com/{{name}}">{{name}}</a>
    </li>
  </ul>

With brick, you can use every attributes and content of a DOM/SVG node. Moreover, you can do way more than just basic interpolation!

Advanced expression and computed properties

brick makes interpolation even better and allows you to create computed properties and advanced expression without writing any JavaScript!

<a href="http://github/{{name + '/' + repo}}">visitor{{ visitor!==1 ? 's' : '' }}</a>

Brick caches every expression for better performance.

Filters

todo

Partials

todo

Data binding

todo