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.
This framework is written to embrace the DOM rather than fight it. You won't see any messy HTML templates or
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.
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 components are those that interact directly with one property of a single model.
These components are similar to regular Model-Bound components, but also include a bound collection of alternatives. The
property options are still used to define the selected value, and following additional options describe the collection of alternatives:
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.
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.
The following components are not meant to be bound to a model or collection, and exist as general-purpose UI elements.
Use the Backbone UI component to show error states.
Components that support error states are:
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 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" />
What would a framework be these days without an example task list application.
The entirety of this application is listed below: