JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<div id="page"></div>

JavaScript

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

define("app", [], function() {
    var app = {};
    app.Router = {};
    return app;
});

define("router", ["jquery", "underscore", "backbone", "app"], function($, _, Backbone, MyApp) {
    var AppRouter = Backbone.Router.extend({
        routes: {
          'goodbye': 'goodbye',
          'hello': 'hello',
          '': 'index'
        },
        goodbye: function() {
            $('#page').append('<p>goodbye</p>');
        },
        hello: function() {
            $('#page').append('<p>hello</p>');
            // we can use MyApp.Router from here too:
            MyApp.Router.navigate('goodbye', { trigger: true });
        },
        index: function() {
            $('#page').append('<p>index</p>');
        }
    });

    return AppRouter;
});

require(["app", "backbone", "router"], function(MyApp, Backbone, AppRouter) {
    MyApp.Router = new AppRouter;
    Backbone.history.start();
    MyApp.Router.navigate('hello', { trigger: true });
});