JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.3/backbone.js"></script>
<script src="https://raw.github.com/PaulUithol/Backbone-relational/master/backbone-relational.js"></script>
JavaScript
console.clear();
Person = Backbone.RelationalModel.extend({
initialize: function(){
var dit = this;
this.bind('update:jobs', function(company) {
console.debug( this.get('name') + ' says: "My company has been updated to ' + company.get('name') + '"' );
}, this);
this.bind( 'change', function() {
dit.get( 'jobs' ).each( function( job ) {
job.get( 'company' ).trigger( 'update:employees', dit );
});
});
},
relations: [
{
type: 'HasMany',
key: 'jobs',
relatedModel: 'Job',
reverseRelation: {
key: 'person'
}
}
],
getCompanies: function(){
return this.get('jobs').pluck('company');
}
});
Job = Backbone.RelationalModel.extend({
initialize: function(){
this.bind( 'update:person', function() {
console.debug( 'update:person; arguments=%o', arguments );
});
this.bind( 'update:company', function() {
console.debug( 'update:company; arguments=%o', arguments );
});
}
});
Company = Backbone.RelationalModel.extend({
initialize: function(){
var dit = this;
this.bind('update:employees', function(person) {
console.debug( this.get('name') + ' says: "My employee has been updated to ' + person.get('name') + '"' );
}, this);
this.bind( 'change', function() {
dit.get( 'employees' ).each( function( employee ) {
employee.get( 'person' ).trigger( 'update:jobs', dit );
});
});
},
relations: [
{
type: 'HasMany',
key: 'employees',
relatedModel: 'Job',
reverseRelation: {
key: 'company'
}
}
],
getPersons: function(){
return...