Tutorial: Relational Models

Views:

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

  <p>Location: <input data-bind="value: location"/></p>
  <p>
    Has these people living there:
    <ul data-bind="foreach: occupants">
      <li data-bind="text: name"></li>
    </ul>
  </p>
</div>

ViewModel and Bindings:

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])

// Generated by CoffeeScript 1.3.3
var bob, fred, house, view_model;

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]);

Live Result

Views:

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

  <p>Location: <input data-bind="value: location"/></p>
  <p>
    Has these people living there:
    <ul data-bind="foreach: occupants">
      <li data-bind="text: name"></li>
    </ul>
  </p>
</div>

Models:

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

Person = Backbone.RelationalModel.extend({})

// Generated by CoffeeScript 1.3.3
var House, Person;

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

Person = Backbone.RelationalModel.extend({});

ViewModel and Bindings:

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])

// Generated by CoffeeScript 1.3.3
var bob, fred, house, view_model;

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]);

Live Result