JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.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

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...