JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<script src="http://requirejs.org/docs/release/2.0.6/minified/require.js"></script>

JavaScript

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    },
    paths: {
        jquery: 'http://code.jquery.com/jquery-1.8.2.min',
        underscore: 'http://underscorejs.org/underscore-min',
        backbone: 'http://backbonejs.org/backbone-min',
    }
});


define('ModelInstance', [
    'underscore',
    'backbone'
], function(_, Backbone) {
    var Model = Backbone.Model.extend({
        initialize: function() {
            this.set('foo', 'bar');   
        }
    });

    return new Model();    
});

define('ModelConstructor', [
    'underscore',
    'backbone'
], function(_, Backbone) {
    var Model = Backbone.Model.extend({
        initialize: function() {
            console.log('ModelConstructor initialized');
            this.set('foo', 'bar');  
        }
    });

    return Model;    
});

define('View', [
    'underscore',
    'backbone',
    'ModelInstance',
    'ModelConstructor'
], function(_, Backbone, ModelInstance, ModelConstructor) {
    var View = Backbone.View.extend({
        model: new ModelConstructor(),            
        initialize: function() {
            console.log('View initialized');                
            ModelInstance.on('change', function() {
                console.log('Model instance has changed'); 
            });

            this.model.on('change', function() {
                console.log('Model constructor has changed'); 
            });
        }
    });
    
    return new View();
});

require(['View'], function() {
    
});