Bi-directional bindings between Backbone.View elements and Backbone.Model attributes.

See some demo action here http://jsfiddle.net/T2MSu/3/

var MealLogView = Backbone.View.extend({
    template: _.template('<h1 class="name"></h1><input type="text" name="name">'),
    bindings: {
        'text h1.name': 'name',
        'value input[name="name"]': 'name',
    },

    render: function() {
        this.$el.html(this.template());
        return this.bindModel();
    }
});

Bindings is a hash defined on the view as a property named bindings or passed to this.bindModel(). The key in bindings hash consist of two parts, the property you want to bind to and the selector for the element you're targeting. Omitting the selector causes the event to be bound to the view's root element this.el.

Property binders return accessors for setting or getting DOM values.

• value
• text
• html
• class
• checked

If a property cannot be found in the defined binders it defaults to __attr__. __attr__ is a special binder that look up the property in the elements attributes. This is useful for binding to a wide variety attributes like data-custom and other custom attributes you need.

Binders are defined in the Backbone.View.Binders hash. The context of a property binder is the view and the context of the returned accessors is the element being bound to. A binder function takes three arguments: model, attribute, and property. The binder must return an accessors hash with get and or set defined as functions. get takes no arguments and should return a value from the element. set takes one argument: value and should set the element to that value.

Backbone.View.Binders['mycustom'] = function(model, attribute, property) {
    return {
        get: function() {
            return this.css('background');
        },
        set: function(value) {
            this.css('background', value);
        }
    };
};

var MealLogView = Backbone.View.extend({
    bindings: {
        'mycustom div.cool-div': 'color'
    },

    render: function() {
        this.$el.html(this.template());
        return this.bindModel();
    }
});

Transformers are used for mutating the data between the model and view. A get transformer is a simple function that takes in a value and returns a value. When dealing with bi-directional (get and set) transformations a transformer should be list of two functions, one for get and one for set respectively. The context of transformer functions is the view.

var triedClassTransformer = function(value) {
    return (value == true) ? 'tried' : 'todo';
};

var MealLogView = Backbone.View.extend({
    bindings: {
        'class': ['tried', triedClassTransformer],
    },

    render: function() {
        this.$el.html(this.template());
        return this.bindModel();
    }
});

var yesNoTransformer = [function(value) {
    return value === "yes";
}, function(value) {
    return (value) ? "yes" : "no";
}];

var MealLogView = Backbone.View.extend({
    bindings: {
        'checked input[name="tried"]': ['tried', yesNoTransformer]
    },

    render: function() {
        this.$el.html(this.template());
        return this.bindModel();
    }
});