Build Status

logo

Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.

Why Knockback?

Examples

Simple

The HTML:
<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />
And...engage:
model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'})
ko.applyBindings(kb.viewModel(model))

When you type in the input boxes, the values are properly transferred bi-directionally to the model and all other bound view models!

Advanced

The View Model:

Javascript

var ContactViewModel = kb.ViewModel.extend({
  constructor: function(model) {
    kb.ViewModel.prototype.constructor.call(this, model);

    this.full_name = ko.computed(function() {
      return this.first_name() + " " + this.last_name();
    }, this);
});

or Coffeescript

class ContactViewModel extends kb.ViewModel
  constructor: (model) ->
    super model

    @full_name = ko.computed => "#{@first_name()} #{@last_name()}"
The HTML:
<h1 data-bind="text: 'Hello ' + full_name()"></h1>
<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />
And...engage:
model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'})
view_model = new ContactViewModel(model)
ko.applyBindings(view_model)

# ... do stuff then clean up
kb.release(view_model)

Now, the greeting updates as you type!

Getting Started

Download Latest (1.2.3):

Please see the release notes for upgrade pointers.

The full versions bundle advanced features.

The core versions remove advanced features that can be included separately: localization, formatting, triggering, defaults, and validation.

The stack versions provide Underscore.js + Backbone.js + Knockout.js + Knockback.js in a single file.

###Distributions

You can also find Knockback on your favorite distributions:

###Dependencies

###Compatible Components

Contributing

To build the library for Node.js and browsers:

$ gulp build

Please run tests before submitting a pull request:

$ gulp test --quick

and eventually all tests:

$ npm test

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: