Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 src Expose unbindFromAll method December 15, 2012
Octocat-spinner-32 test Move all developer dependencies to bower December 25, 2013
Octocat-spinner-32 .gitignore Move all developer dependencies to bower December 25, 2013
Octocat-spinner-32 CHANGELOG.md
Octocat-spinner-32 Cakefile Initial commit May 13, 2012
Octocat-spinner-32 LICENSE Initial commit May 13, 2012
Octocat-spinner-32 README.md
Octocat-spinner-32 bower.json Update version number December 25, 2013
README.md

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.

Something went wrong with that request. Please try again.