Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.
- 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!
<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!
- Website - explore everything Knockback and connect to the community
- Tutorials - try some live examples
- API Docs - dig into the API
- TodoMVC App (Live!) - compare client-side framworks
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.
###Distributions
You can also find Knockback on your favorite distributions:
- npm: npm install knockback
- Bower: bower install knockback
- NuGet - install right in Visual Studio
###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
- 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).
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent