backbone.associate demo

https://github.com/rjz/backbone-associate

by rjzaworski

HTML

<script src="https://raw.github.com/rjz/backbone.associate/9bb262a3/src/backbone.associate.js"></script>

JavaScript

// Backbone.associate -- basic usage
// see: https://github.com/rjz/backbone.associate/

var Country = Backbone.Model.extend({ /* ... */ });
var Flag = Backbone.Model.extend({ /* ... */ });
var City = Backbone.Model.extend({ /* ... */ });
var Cities = Backbone.Collection.extend({ model: City });

Backbone.associate(Country, {
  flag: { type: Flag },
  cities: { type: Cities }
});

var data = {
  cities: [
    { name: 'Calgary' },
    { name: 'Regina' }
  ]
};

var canada = new Country(data, { parse: true });

// demo JSON
console.log(canada.toJSON());

// demo accessor
console.log(canada.cities() === canada.get('cities'));

// demo manipulating associated Model
canada.flag().set({ colors: ['red','white'] });

// demo manipulating associated Collection
canada.cities().add([
  { name: 'Edmonton' },
  { name: 'Montreal' },
  { name: 'Ottawa' },
  { name: 'Vancouver' }
]);

console.log(canada.toJSON());