Backbone.BindTo

Backbone.js extension for automatic binding and unbinding of model events to views.

Features

BindToModel

In a lot of Backbone.js applications when you want to react to model events you have to write:

window.UserCardView = Backbone.View.extend({
  initialize: function() {
    this.model.bind('change:name',  this.renderName,  this);
    this.model.bind('change:email', this.renderEmail, this);
  },
  remove: function() {
    this.model.unbind('change:name',  this.renderName,  this);
    this.model.unbind('change:email', this.renderEmail, this);
    Backbone.View.prototype.remove.apply(this, arguments);
  },
  renderName:  function() { /* ... code ... */ },
  renderEmail: function() { /* ... code ... */ }
});

With Backbone.BindTo you can just do:

window.UserCardView = Backbone.View.extend({
  bindToModel: {
    'change:name':  'renderName',
    'change:email': 'renderEmail'
  },
  renderName:  function() { /* ... code ... */ },
  renderEmail: function() { /* ... code ... */ }
});

BindToCollection

Of course, there is a similar method for binding to collection events:

window.TodoListView = Backbone.View.extend({
  bindToCollection: {
    'add': 'renderNewTask'
  },
  renderNewTask: function() { /* ... code ... */ }
});

bindTo

You can also use a generic bind function:

window.CommentView = Backbone.View.extend({
  initialize: function() {
    this.parentView.on('editing:start', this.onEditingStart, this);
  },
  remove: function() {
    this.parentView.off('editing:start', this.onEditingStart, this);
    Backbone.View.prototype.remove.apply(this, arguments);
  },
  onEditingStart:  function() { /* ... code ... */ }
});

Can be simplified as:

window.CommentView = Backbone.View.extend({
  initialize: function() {
    this.bindTo(this.parentView, 'editing:start', 'onEditingStart');
  },
  onEditingStart:  function() { /* ... code ... */ }
});

It can also accept a raw function:

window.CommentView = Backbone.View.extend({
  initialize: function() {
    this.bindTo(this.parentView, 'editing:start', function() {
      console.log('editing has started');
    });
  }
});

DOM/jQuery elements are also supported:

window.CommentView = Backbone.View.extend({
  initialize: function() {
    this.bindTo(window, 'click', windowClicked)
  },
  windowClicked: function() { /* ... code ... */ }
});

Remove

Backbone.BindTo automatically unbinds from all model and collection events when the view element is removed via Backbone.View#remove. Also unbinds from all events binded via #bindTo.

noConflict

If extending directly Backbone.View bothers you. You can use the Backbone.BindTo.noConflict method. It restores Backbone.View to its original value. And returns the Backbone.BindTo.View object which has the bindToModel and bindToCollection helpers.

window.BindToView = Backbone.BindTo.noConflict()

Installing

You can get Backbone.BindTo in several ways:

• copy lib/backone_bind_to.js into your project
• copy src/backbone_bind_to.coffee into your project if you are using CoffeeScript
• via Bower - bower install Backbone.BindTo from your console
• adding Backbone.BindTo as your bower dependency

Requirements

Backbone.js - 0.9.2+

Running the tests

Install bower developer dependencies - bower install.

Just open - test/runner.html.

Contributing

Every fresh idea and contribution will be highly appreciated.

If you are making changes please do so in the coffee files. And then compile them with:

cake build

License

MIT License.