Backbone UI

Overview

Backbone UI provides a simple way to represent your Backbone Models and Collections as UI components. The need to shuffle data in and out of your UI is replaced with simple data binding techniques. All components are skinnable with CSS, and will render consistently accross browsers. The source is hosted on github with an MIT license.

Philosophy

This framework is written to embrace the DOM rather than fight it. You won't see any messy HTML templates or innerHTML references hanging around. What you will see is heavy use of the Laconic library to help ease the pain of DOM manipluation so we can happily stay in the context of writing JavaScript.

Not all people will agree with this philosophy, and not all projects will benefit from embracing it. This framework facilitates the creation of highly dynamic front-end clients that request only data from the back-end, not markup. If you have a more traditional application in which your markup is generated before your JavaScript executes, you may still find this framework useful, but keep in mind that it was not designed for such a case.

Another major theme you'll encounter is the concept of data binding. This means that you tell your component which property of the model it's responsible for rendering, and then you forget about shuffling data back and forth. If the model's value changes, the component will re-render. If the user changes the value, the model will be updated. Easy.

Dependencies

Backbone UI depends on Backbone, jQuery (or Zepto), and Laconic. If you'd like to use the calendar or date picker components, than you'll also need a copy of moment.js.

Components

All components inherit from Backbone.View, and each render method will return a reference to the view itself. Feel free to pass any standard Backbone View option when creating these components. As a convenience, the underscored version of the component's class name will be added to each component's element.

Components can be broken down into four categories:

The following data will be used throughout the examples:

Model-Bound

Model-Bound components are those that interact directly with one property of a single model.

Button

Calendar

Checkbox

Date Picker

Text Area

Text Field

Time Picker

Model-Bound with Alternatives

These components are similar to regular Model-Bound components, but also include a bound collection of alternatives. The model and property options are still used to define the selected value, and following additional options describe the collection of alternatives:

Pulldown

Radio Group

Collection-Bound

These components are bound to a Backbone.Collection as opposed to a Model. The rendering of a particular item in the collection is defined by the given itemView implementation.

List View

Table View

Table Views are similar to List Views, but allow you to pass a small amount of table meta-data as opposed to writing your own itemView implementation.

Non-Bound

The following components are not meant to be bound to a model or collection, and exist as general-purpose UI elements.

Tab Set

Error Handling

Use the Backbone UI component to show error states.

Components that support error states are:

UI Skinning

Skinning of UI components should be done using CSS and image resources. The default skin is fully functional without any image resources, however; this documentation uses an example skin as a reference for building your own. The following will enable this skin:

Backbone.UI.setSkin('perka');

Browser Support

Backbone UI has been tested on most modern browsers, as well as IE8+. If you're using the HTML 5 Doctype, you may need to use the following meta tag to force IE into standards mode:

<meta http-equiv="X-UA-Compatible" value="IE=edge" />

Example Application

What would a framework be these days without an example task list application.

The entirety of this application is listed below: