Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.
JavaScript CoffeeScript

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
doc
lib
media
packages
src
test
vendor
.gitignore
.travis.yml
Bakefile.coffee
LICENSE
README.md
knockback-core-stack.js
knockback-core-stack.min.js
knockback-core.js
knockback-core.min.js
knockback-full-stack.js
knockback-full-stack.min.js
knockback.js
knockback.min.js
package.json

README.md

Build Status

logo

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

Website: kmalakoff.github.com/knockback

You can get the library here:

NOTE: there are breaking changes in 0.16.+ Please see the release notes for details.

Dependencies

Compatible Components

  • BackboneRelational.js - provides helpers for one-to-one and one-to-many relationships between your Backbone.Models.
  • 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).
  • (new!) 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).

Demos and Documentation

For comprehensive tutorials, take a look at the website: http://kmalakoff.github.com/knockback/

Please try the TodoMVC App and check out the (new!) Knockback.js Reference App for some best practices when using Knockback.js.

Why Write Knockback.js?

When I was evaluating client-side frameworks, I liked lots of the pieces, but wanted to "mix and match" the best features. I started with Backbone.js and really loved the Models and Collections, and used Brunch to get me up and running quickly.

After a while, I found the view coding too slow so I wrote Mixin.js to extract out reusable aspects of my views. When I was looking for my next productivity increase, an ex-work colleague suggested Sproutcore, but at the time, it wasn't yet micro-frameworky enough meaning I would need to learn something big and "to throw the baby out with the bathwater" as they say (it is hard to give up Backbone models and collections!). Then, I discovered Knockout and knew it was for me!

Knockout provided just the right building blocks for a layer between my templates and data. As I used it more, I built additional functionality like Backbone.ModelRefs for lazy model loading, localization helpers for truly dynamic views, and most recently, an easier way to sync collections and their model's view models.

So here it is...the refactored and shareable version of my Backbone bindings for Knockout: Knockback.js

Enjoy!

Kevin

An Example

The view model:

ContactViewModel = (model) ->
  kb.observables(model, {
    name:     'name'
    email:    {key:'email', default: 'your.name@yourplace.com'}
    date:     {key:'date', localizer: LongDateLocalizer}
  }, this)
  @           # must return this or Coffeescript will return the last statement which is not what we want!

or (Coffeescript)

class ContactViewModel extends kb.ViewModel
  constructor: (model) ->
    super(model, {internals: ['email', 'date']})  # call super constructor: @name, @_email, and @_date created in super from the model attributes
    @email = kb.defaultObservable(@_email, 'your.name@yourplace.com')
    @date = new LongDateLocalizer(@_date)

or (Javascript)

var ContactViewModel = kb.ViewModel.extend({
  constructor: function(model) {
    kb.ViewModel.prototype.constructor.call(this, model, {internals: ['email', 'date']});   // call super constructor: @name, @_email, and @_date created in super from the model attributes
    this.email = kb.defaultObservable(this._email, 'your.name@yourplace.com');
    this.date = new LongDateLocalizer(this._date);
    return this;
  }
});

The HTML:

<label>Name: </label><input data-bind="value: name" />
<label>Email: </label><input data-bind="value: email" />
<label>Birthdate: </label><input data-bind="value: date" />

And...engage:

view_model = new ContactViewModel(new Backbone.Model({name: 'Bob', email: 'bob@bob.com', date: new Date()}))
ko.applyBindings(view_model)

# ...

# and cleanup after yourself when you are done.
kb.release(view_model)

And now when you type in the input boxes, the values are properly transferred to the model and the dates are even localized!

Of course, this is just a simple example, but hopefully you get the picture.

Building, Running and Testing the library

Installing:

  1. install node.js: http://nodejs.org
  2. install node packages: 'npm install'

Commands:

Look at: https://github.com/kmalakoff/easy-bake

Something went wrong with that request. Please try again.