knockback

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

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

Why Knockback?

  • Make amazingly dynamic applications by applying a small number of simple principles
  • Leverage the wonderful work from both the Backbone and Knockout communities
  • Easily view and edit relationships between Models using an ORM of your choice:
  • Simplify program control flow by configuring your application from your HTML Views. It's like Angular.js but without memorizing all of the special purpose ng-{something} attributes. See the Inject Tutorial for live examples!

Examples

<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />
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!

Javascript

var ContactViewModel = kb.ViewModel.extend({
  constructorfunction(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()}"
<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'" />
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 (0.20.5):

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:

  • npm: npm install knockback
  • Bower: bower install knockback
  • Component: component install kmalakoff/knockback
  • NuGet - install right in Visual Studio
  • Jam: jam install knockback

###Dependencies

  • Backbone.js - provides the Model layer
  • Knockout.js - provides the ViewModel layer foundations for Knockback
  • Underscore.js - provides an awesome JavaScript utility belt
  • LoDash - optionally replaces Underscore.js with a library optimized for consistent performance
  • Parse - optionally replaces Backbone.js and Underscore.js

###Compatible Components

  • BackboneORM - A polystore ORM for Node.js and the browser
  • Backbone-Relational.js - Get and set relations (one-to-one, one-to-many, many-to-one) for Backbone models
  • Backbone Associations - Create object hierarchies with Backbone models. Respond to hierarchy changes using regular Backbone events
  • Supermodel.js - Minimal Model Tracking for Backbonejs
  • BackboneModelRef.js - provides a reference to a Backbone.Model that can be bound to your view before the model is loaded from the server (along with relevant load state notifications).
  • KnockbackNavigators.js - provides page and pane navigation including history and state (useful for single-page and mobile apps). Can be used independently from Knockback.js.
  • KnockbackInspector.js - provides customizable tree view of models and collections for viewing and editing your data (useful for debugging and visualizaing JSON).

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