Backbone Directives Examples

These are some examples of the Backbone Directives being used.

The binding are declared as directives on the html itself and the view becomes a live view.

Source code is on GitHub and read the blog post about it

bb-bind

Updates the text of an element based on the model's attributes. Expressions are also evaluated.

Usage:

<span bb-bind="counter"></span>

<span bb-bind="counter * 2"></span>

<span bb-bind="counter % 2 == 0 ? 'even' : 'odd'"></span>

Example:

Let's double it:

It is an number

bb-class

Add/Removes a class based on the model's attributes. Expressions are also evaluated.

Usage:

<span bb-class="{red: flag, bold: bold}">What's my color?</span>

Example:

What's my color?

bb-model

Binds an attribute to an input element.

Usage:

<input bb-model="name">

Example:


My name is !


The checkbox is .




The radio button is .

bb-show

Show/Hides the element based on the model's attributes. Expressions are also evaluated.

Usage:

<span bb-show="flag">Hello World!</span>

Example:

Hello World!

bb-src

Binds an image's source to the model's attributes using a template form.

Usage:

<img bb-src="http://www.example.com/{{name}}.png">

Example:

I'd love to talk about this over at Twitter: @ketacode