Skip to content
Knockout integration with Backbone.js
CoffeeScript Shell
Find file
New pull request
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test First version.
.gitignore First version.
AUTHORS First version.
LICENSE First version.


Knockout integration with Backbone

This library provides a smooth integration of Knockout with Backbone.

It is meant to be a simpler and lightweight alternative to Knockback. For comparison, Knockback core is 62Kb unminified (10Kb minified and gzipped), while Backbone-KO is 3.5Kb unminified and less than 1Kb minified and gzipped).

Key Benefits

  • Use the familiar Backbone with the all the added power of Knockout
  • Bi-directional model-view binding
  • Knockout view models are automatically created from Backbone models (can be provided explicitly if needed)
  • Transparent binding through Backbone views
  • Extensively tested with mocha and zombie
  • Completely backward compatible

Compatibility and Requirements

Backbone-KO has the following dependencies:

The dependencies are not particularly strict: slightly earlier or later versions should work too.

Download and Installation

Just copy the library (either backbone-ko.js or backbone-ko.src.js) from the dist folder to your javascript assets directory and include it using a script tag:

  <script src="backbone-ko.js"></script>

Using Bower:

npm install -g bower
bower install backbone-ko

Getting Started

The library is contained in the bko namespace.

The simplest way to use it is through bko.View, a Backbone.View extended with Knockout support. bko.View will take care to create a KO view model from the Backbone model provided and to automatically apply the bindings to the view el:

$(function() {
  var Person = Backbone.Model.extend({});
  var person = new Person({ first_name: "Thomas", last_name: "Jefferson", age: 83 });

  var personFormView = new bko.View({ el: $("#person"), model: person });

and the HTML:

  <form id="person">
    <p>First name: <input data-bind="value: first_name" /></p>
    <p>Last name: <input data-bind="value: last_name" /></p>
    <p>E-mail: <input data-bind="value: email" /></p>
    <p>Age: <input data-bind="value: age" /></p>

In the above example, the form will be automatically populated with values from the Backbone model, and the model will be updated whenever the user modifies the form fields. In other words a bi-directional binding is estabilished between the view and the model.


Backbone-KO is © 2013 Marco Pantaleoni, released under the MIT licence. Use it, fork it.

Something went wrong with that request. Please try again.