JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>

JavaScript

var InnerModel = Backbone.Model.extend({
    defaults : function() {
        return {
            test: "inside"
        }
    },
    
    initialize: function() {
        this.on('change', this.shout);
    },
    
    shout: function() {
        console.log("Inner model has changed!");
    }
});

var InnerCollection = Backbone.Collection.extend({
    model: InnerModel,
    
    localStorage: new Backbone.LocalStorage("todos-backbone"),
    
    shout: function() {
        console.log("Inner collection has changed!");
    },
    
    initialize: function() {
        console.log("Inner collection created!");
        this.on('change', this.shout);
        window.inner = this;
    }
});

var OuterModel = Backbone.Model.extend({
    defaults : function() {
        return {
            outertest: "outside",
        }
    },
    
    initialize: function() {
        this.on('change', this.shout);
    },
    
    shout: function() {
        console.log("Outer model has changed!");
    }
});

var OuterCollection = Backbone.Collection.extend({
    model : OuterModel,
    
    localStorage: new Backbone.LocalStorage("todos-backbone"),
    
    shout: function() {
        console.log("Outer collection has changed!");
    },
    
    initialize: function() {
        console.log("Outer collection created!");
        this.on('change', this.shout);
    }
});

console.log("Initializing models and collections...");

//create stuff
var inner = new InnerCollection();
var innerm = inner.create();
var outer = new OuterCollection();
var outerm = outer.create();

//attach the collection
outerm.set('testcollection', inner);
outerm.listenTo(inner, 'change', function() {
    outerm.trigger('change');
});

console.log("Done initializing");

//test propagation
inner.models[0].set('test', 'foo');