Knockback.js

Tutorial: Relational Models

Knockback.js supports nested collections that you set up yourself or that are created byBackbone-Relational

Manual Relations (Collection)

<div id='rm_manual'>
  <p>First Person:
    <input class='input-small pull-right' data-bind="value: occupants()[0].name, valueUpdate: 'keyup'"/>
    <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
  </p>
  <p>Second Person:
    <input class='input-small pull-right' data-bind="value: occupants()[1].name, valueUpdate: 'keyup'"/>
    <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
  </p>

  <p>Location: <input class='input-small pull-right' data-bind="value: location, valueUpdate: 'keyup'"/></p>
  <p>
    Has these people living there:
    <ul data-bind="foreach: occupants">
      <li data-bind="text: name"></li>
    </ul>
  </p>
</div>
bob = new Backbone.Model({name: 'Bob'})
fred = new Backbone.Model({name: 'Fred'})

house = new Backbone.Model({
  location: 'In the middle of our street'
  occupants: new Backbone.Collection([bob, fred])
})

bob.set({livesIn: house})
fred.set({livesIn: house})

view_model = kb.viewModel(house)

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

var bob = new Backbone.Model({name: 'Bob'});
var fred = new Backbone.Model({name: 'Fred'});

var house = new Backbone.Model({
  location: 'In the middle of our street',
  occupants: new Backbone.Collection([bob, fred])
});

bob.set({livesIn: house});
fred.set({livesIn: house});

view_model = kb.viewModel(house);

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

Live Result

First Person:

(home: )

Second Person:

(home: )

Location:

Has these people living there:

Backbone-Relational

Let's look at an example from the Backbone-Relational site:

<div id='br_relational_models'>
  <p>First Person:
    <input class='input-small pull-right' data-bind="value: occupants()[0].name, valueUpdate: 'keyup'"/>
    <div>(home: <span data-bind="text: occupants()[0].livesIn().location"></span>)</div>
  </p>
  <p>Second Person:
    <input class='input-small pull-right' data-bind="value: occupants()[1].name, valueUpdate: 'keyup'"/>
    <div>(home: <span data-bind="text: occupants()[1].livesIn().location"></span>)</div>
  </p>

  <p>Location: <input class='input-small pull-right' data-bind="value: location, valueUpdate: 'keyup'"/></p>
  <p>
    Has these people living there:
    <ul data-bind="foreach: occupants">
      <li data-bind="text: name"></li>
    </ul>
  </p>
</div>
House = Backbone.RelationalModel.extend({
  relations: [{
    type: Backbone.HasMany
    key: 'occupants'
    relatedModel: 'Person'
    reverseRelation:
      key: 'livesIn'
  }]
})

Person = Backbone.RelationalModel.extend({})
var House = Backbone.RelationalModel.extend({
  relations: [{
    type: Backbone.HasMany,
    key: 'occupants',
    relatedModel: 'Person',
    reverseRelation: {
      key: 'livesIn'
    }
  }]
});

var Person = Backbone.RelationalModel.extend({});
bob = new Person({id: 'person-1', name: 'Bob'})
fred = new Person({id: 'person-2', name: 'Fred'})

house = new House({
  location: 'In the middle of our street'
  occupants: ['person-1', 'person-2']
})

view_model = kb.viewModel(house)

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

var bob = new Person({id: 'person-1', name: 'Bob'});
var fred = new Person({id: 'person-2', name: 'Fred'});

var house = new House({
  location: 'In the middle of our street',
  occupants: ['person-1', 'person-2']
});

var view_model = kb.viewModel(house);

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

Live Result

First Person:

(home: )

Second Person:

(home: )

Location:

Has these people living there: