Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.
<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({
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()}"
<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!
Please see the release notes for upgrade pointers.
Full Library (dev, 64k) or (min+gzip, 8k)
Full Stack (dev, 330k) or (min+gzip, 32k)
Core Library (dev, 54k) or (min+gzip, 7k)
Core Stack (dev, 315k) or (min+gzip, 31k)
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.
You can also find Knockback on your favorite distributions:
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