Bind'em: two-way declarative data binding for javascript

A light-weight javascript library providing Knockout-like two-way declarative data binding for Backbone.

Intro

When I first saw Knockout.js I was stunned. It introduces concepts like observables, computed observables, View-Model (MVVM) and two-way declarative data binding. It makes building highly interactive user interfaces really easy. However, as time went on I realized it is kind of hard to build and structure more complex apps with Knockout.js, especially integrating other non-knockout components. Which is where Backbone.js is more suitable option.

Observables are basically an event system, which is heavily used in Backbone. Computed observables can be simulated as well. But when you want to have a rich interactivity you end up with a lot of event handlers around your code. Often it ends up like spaghetti code made out of jQuery. The View-Model paradigm and declarative two-way binding reduces a lot of code and makes the application logic clearer.

The goal of this library is to bring some Knockout awesomeness to the Backbone world!

Tested in Chrome 19, Firefox 12, Opera 11, Internet Explorer 6 7 8. Test it in your browser.

Example

See more examples of advanced usage.

Usage

First you need to initialize bindings using:

Backbone.Bindem.on.call(view, bindingsObject [,options]);

There are following options available:

model - make bindings to the specified model. Default is the view's model.
initialize - init values in DOM using values from the model. Default is false.
root - Specifiy the root element. Selectors for element binding are searched relatively to the root. Default is the view's element stored in el property.
m2v - Transforation function (model to view).
v2m - Transforation function (view to model).

The bindingsObject has a following form:

{
    // basic usage of common bindings
    modelAttribute: {
        // to use the binding you just specify a string with selector
        bindingType: '#selector',
        // if you want to specify some options, you need to use object literal
        otherBinding: {
            selector: '#someElement',
            someOption: ...
        },
        // if you want to specify many elements, just put then in array
        text: ['#selector1', '#selector2', {selector: '#selector3'}]
    },
    // css, style and attr bindings use the following pattern
    otherAttribute: {
        css: {
            className: '#selector',
            warning: '#messageBox'
        },
        style: {
            cssProperty: '#selector',
            'font-weight': '.highlight'
        },
        attr: {
            elementAttribute: '#selector',
            title: '#someId',
            text: {
                selector: '#hello',
                // model to view transformation
                m2v: function(val) {return 'Hello, ' + val + '!'}
            }
        }
    },
    // change handler added for convenience
    anotherAttribute: {
        change: function(value) {
            // this function is called when model attribute changes.
        }
    }
}

Bindings

Most of the Knockout bindings were implemented with the same behavior.

text	Displays the text value of a model's attribute in associated DOM element.
html	Displays the html value of an attribute in element.
css	Adds or removes element class based on value.
style	Adds or removes element style values.
attr	Sets attribute of an element to a value of model' attribute.
visible / hidden	Show or hide element base on value.
enable / disable	Show or hide element base on value.
value	Synchronize value between form element and model. Works with <input> and <textarea>. Value is updated by default with change event (which is trigerred when element loses focus). If you want value to be updated on every keystroke, specify other event, for example: `event: 'keyup'`.
checked	Synchronize the state of <checkbox> or <radio> elements with model.
hasfocus	Synchronize focused state of an element with model's value. If the value is set to true, then the element gains focus.
uniqueName	Sets a unique value as to name attribute of an element.
change	Specified functions is called when model attribute changes. This is added for convenience and is equivalent to binding change event on model.

Download

download here
Source code is hosted on github.
Please fill feature requests and bug reports here.

Other libraries

If this library doesn't fit your taste (please let me know why), you can try different ones from other authors:

epoxy.js
Backbone.ModelBinder - Simple Model-View binding for Backbone
backbone.stickit
Backbone.DataBinding
Backbone.Mutators
Knockback - library bridging Backbone and Knockout. It supports whole feature-set of Knockout, not just the data binding.
rivets.js