Knockback.js

Getting Started with Knockback.js: Knockback.js Basics

You can use Knockback to bind Backbone Models/Collections to your HTML/templates (View) using Knockout. This allows server or application changes to Models/Collections to be propagated automatically to your views using `Backbone.sync`

Using with a Backbone.Model

Creating a ko.observable() for each model attribute by hand:

You can create a ViewModel with Knockout observables for each Backbone.Model attribute usingkb.observable for simple attributes (as below) orkb.ViewModel for Backbone.Model attributes orkb.CollectionObservable.

Creating a ViewModel by hand is the best way to create optimized ViewModels.

<div id='kb_observable'>
  <p>First name: <input class='input-small pull-right' data-bind="value: first_name, valueUpdate: 'keyup'" /></p>
  <p>Last name: <input class='input-small pull-right' data-bind="value: last_name, valueUpdate: 'keyup'" /></p>
  <p>Hello, <span data-bind="text: full_name"> </span>!</p>
</div>

model = new Backbone.Model({first_name: "Planet", last_name: "Earth"})

ViewModel = (model) ->
  @first_name = kb.observable(model, 'first_name')
  @last_name = kb.observable(model, 'last_name')
  @full_name = ko.computed((->return "#{this.first_name()} #{this.last_name()}"), @)
  return

view_model = new ViewModel(model)

ko.applyBindings(view_model, $('#kb_observable')[0])
var ko = kb.ko;

var model = new Backbone.Model({first_name: "Planet", last_name: "Earth"});

var ViewModel = function(model) {
  this.first_name = kb.observable(model, 'first_name');
  this.last_name = kb.observable(model, 'last_name');
  this.full_name = ko.computed((function() {return "" + (this.first_name()) + " " + (this.last_name());}), this);
};

var view_model = new ViewModel(model);

ko.applyBindings(view_model, $('#kb_observable')[0]);

Live Result

First name:

Last name:

Hello, !

Creating a ko.observable() automatically for each model attribute:

Creating a ViewModel with a Knockout observable for each Backbone.Model attribute automatically using akb.viewModel factory is a good way to rapidly prototype. Of course, it creates more Knockout observables than required which can be expensive in terms of unneccessary bloat.

<div id='kb_view_model_computed'>
  <p>First name: <input class='input-small pull-right' data-bind="value: first_name, valueUpdate: 'keyup'" /></p>
  <p>Last name: <input class='input-small pull-right' data-bind="value: last_name, valueUpdate: 'keyup'" /></p>
  <p>Hello, <span data-bind="text: full_name"> </span>!</p>
</div>
model = new Backbone.Model({first_name: "Planet", last_name: "Earth"})

view_model = kb.viewModel(model)
view_model.full_name = ko.computed((->return "#{@first_name()} #{@last_name()}"), view_model)

ko.applyBindings(view_model, $('#kb_view_model_computed')[0])
var ko = kb.ko;

var model = new Backbone.Model({first_name: "Planet", last_name: "Earth"});

var view_model = kb.viewModel(model);
view_model.full_name = ko.computed((function() {return "" + (this.first_name()) + " " + (this.last_name());}), view_model);

ko.applyBindings(view_model, $('#kb_view_model_computed')[0]);

Live Result

First name:

Last name:

Hello, !

Using with a Backbone.Collection

Create a kb.ViewModel automatically for each model in a collection:

In Knockback.js, a kb.CollectionObservable can be used with a Backbone.Collection for many different purposes 

<div id='kb_collection' data-bind="foreach: planets">
  <p>First name: <input class='input-small pull-right' data-bind="value: first_name, valueUpdate: 'keyup'" /></p>
  <p>Last name: <input class='input-small pull-right' data-bind="value: last_name, valueUpdate: 'keyup'" /></p>
  <p>Hello, <span data-bind="text: ko.computed(function(){ return $data.first_name() + ' ' + $data.last_name(); })"> </span>!</p>
</div>
earth = new Backbone.Model({first_name: 'Planet', last_name: 'Earth'})
mars = new Backbone.Model({first_name: 'Planet', last_name: 'Mars'})
the_moon = new Backbone.Model({first_name: 'The', last_name: 'Moon'})

planets = new Backbone.Collection([earth, the_moon, mars])

view_model =
  planets: kb.collectionObservable(planets, {view_model: kb.ViewModel})

ko.applyBindings(view_model, $('#kb_collection')[0])
var ko = kb.ko;

var earth = new Backbone.Model({first_name: 'Planet', last_name: 'Earth'});
var mars = new Backbone.Model({first_name: 'Planet', last_name: 'Mars'});
var the_moon = new Backbone.Model({first_name: 'The', last_name: 'Moon'});

var planets = new Backbone.Collection([earth, the_moon, mars]);

var view_model = {
  planets: kb.collectionObservable(planets, { view_model: kb.ViewModel })
};

ko.applyBindings(view_model, $('#kb_collection')[0]);

Live Result

First name:

Last name:

Hello, !