Skip to content

Instantly share code, notes, and snippets.

@DimitarChristoff

DimitarChristoff/partial-app-dashboard.js

Forked from ryanflorence/partial-app-dashboard.js
Created May 23, 2014 07:05
Show Gist options
  • Save DimitarChristoff/d0988b95d11efb1a29b8 to your computer and use it in GitHub Desktop.
Save DimitarChristoff/d0988b95d11efb1a29b8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryanflorence ryanflorence revised this gist May 23, 2014. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions partial-app-inbox.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    /** @jsx React.DOM */
    var Inbox = React.createClass({

    render: function() {
    return (
    <div>
    <h1>Inbox!</h1>
    </div>
    );
    }
    });


  2. @ryanflorence ryanflorence revised this gist May 23, 2014. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions partial-app-dashboard.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    /** @jsx React.DOM */
    var Dashboard = React.createClass({

    render: function() {
    return (
    <div>
    <h1>Dashboard!</h1>
    <ul>
    <li><Link to="inbox">Inbox</Link></li>
    </ul>
    {this.props.activeRoute}
    </div>
    );
    }
    });

  3. @ryanflorence ryanflorence created this gist May 23, 2014.
    66 changes: 66 additions & 0 deletions partial-app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    /** @jsx React.DOM */
    var Routes = rf.router.Routes;
    var Route = rf.router.Route;
    var Link = rf.router.Link;

    var Main = React.createClass({
    render: function() {
    return (
    <Routes handler={App}>
    <Route name="dashboard" path="dashboard" handler={PreDashboard}>
    <Route name="inbox" path="dashboard/inbox" handler={PreInbox}/>
    </Route>
    </Routes>
    );
    }
    });

    var AsyncJSXRoute = {
    load: function() {
    if (window[this.globalName]) return;
    JSXTransformer.load(this.filePath, this.forceUpdate.bind(this));
    },

    componentDidMount: function() {
    setTimeout(this.load, 1000); // feel it good
    },

    render: function() {
    var fullRoute = window[this.globalName];
    return fullRoute ? fullRoute(this.props) : this.preRender();
    }
    };

    var PreDashboard = React.createClass({
    mixins: [AsyncJSXRoute],
    filePath: 'examples/partial-app-dashboard.js',
    globalName: 'Dashboard',
    preRender: function() {
    return <div>Loading dashboard...</div>
    }
    });

    var PreInbox = React.createClass({
    mixins: [AsyncJSXRoute],
    filePath: 'examples/partial-app-inbox.js',
    globalName: 'Inbox',
    preRender: function() {
    return <div>Loading inbox...</div>
    }
    });

    var App = React.createClass({
    render: function() {
    return (
    <div>
    <h1>Partial App</h1>
    <ul>
    <li><Link to="dashboard">Dashboard</Link></li>
    </ul>
    {this.props.activeRoute}
    </div>
    );
    }
    });

    React.renderComponent(<Main/>, document.body);