JSFiddle - React, Tailwind, and code Playground

by dustmason

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js"></script>
<script src="http://cdn.jsdelivr.net/emberjs/1.0.0rc6/ember.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<body>

<script type="text/x-handlebars" id="application">
<div id="app-container">
  <div class="container">

    {{outlet}}

    <div id="footer">
      I am the footer
    </div>
  </div>
</div>

</script>

<script type="text/x-handlebars" id="index">
{{render topBar}}

<div id="main">
  <h1>Index (Projects)</h1>
  {{outlet}}
</div>

</script>

<script type="text/x-handlebars" id="item">
<h3>Item Detail</h3>

<div>
  <p>{{model.code}}</p>
  <p>{{model.description}}</p>
</div>

</script>

<script type="text/x-handlebars" id="items">
<h6>items controls</h6>

<ul>
  {{#each item in model}}
    <li>
      {{#linkTo 'item' item}}{{item.code}}{{/linkTo}}
      {{item.description}}
    </li>
  {{/each}}
</ul>

</script>

<script type="text/x-handlebars" id="login">
{{#if loggedIn}}
  <p>You are already logged in!</p>
{{else}}
  <form class="form-inline" {{action login on="submit"}}>
    <h2>Log In</h2>
    {{input value=email type="text" placeholder="Email"}}
    {{input value=password type="password" placeholder="Password"}}
    {{input class="btn" type="submit" value="Log In"}}
    <p>try logging in with email <strong>[email protected]</strong> and password <strong>foopassword</strong></p>
  </form>
  {{#if errorMessage}}
    <div class="alert alert-error">{{errorMessage}}</div>
  {{/if}}
{{/if}}

</script>

<script type="text/x-handlebars" id="project">
{{render topBar}}

<div id="main">
  <h2>{{model.name}}</h2>

  <div id="items-left-bar">
    {{outlet itemsbar}}
  </div>

  <div id="items-list">
    {{render "items" model.items}}
  </div>

  <div id="item-detail">
    {{outlet itemdetail}}
  </div>

</div>

</script>

<script type="text/x-handlebars" id="topbar">
<div id="header">

  {{view...

CSS

#header {
      position: absolute;
      background: url('/images/top-bar-background.png');
      left: 0;
      top: 0;
      right: 0;
      height: 50px;
  }
  #footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 15px;
      background: #fff;
  }
  #main {
      position: absolute;
      top: 50px;
      left: 0;
      bottom: 15px;
      right: 0;
  }
  #items-left-bar {
      position: absolute;
      left: 0;
      top: 50px;
      bottom: 15px;
      width: 171px;
      background: #ddd;
  }
  #items-list {
      position: absolute;
      left: 171px;
      bottom: 15px;
      top: 50px;
      width: 300px;
      background: #999;
  }
  #item-detail {
      position: absolute;
      left: 471px;
      right: 0;
      top: 50px;
      bottom: 15px;
      background: #ddd;
  }

JavaScript

(function () {
    var App;

    App = window.App = Em.Application.create();

    // storing the token here (root-level on App) feels wrong,
    // where should I be storing it?
    App.token = localStorage.token;
    App.addObserver('token', App, function () {
        return localStorage.token = this.get("token");
    });

    App.AuthenticatedRoute = Ember.Route.extend({
        beforeModel: function (transition) {
            if (!App.get("token")) {
                return this.redirectToLogin(transition);
            }
        },
        redirectToLogin: function (transition) {
            var loginController;
            loginController = this.controllerFor("login");
            loginController.set("attemptedTransition", transition);
            return this.transitionTo("login");
        },
        events: {
            error: function (reason, transition) {
                console.log(reason);
                if (reason.status === 401) {
                    return this.redirectToLogin(transition);
                } else {
                    return alert("Something went wrong");
                }
            }
        }
    });

    App.AuthenticatedRESTAdapter = DS.RESTAdapter.extend({
        ajax: function (url, type, hash) {
            hash = hash || {};
            hash.data = hash.data || {};
            hash.data.auth_token = App.token;
            hash.headers = hash.headers || {};
            return this._super(url, type, hash);
        }
    });

    App.Store = DS.Store.extend({
        adapter: App.AuthenticatedRESTAdapter.create({
            url: "http://arcane-stream-2211.herokuapp.com"
        })
    });

    App.Router.map(function () {
        this.route("login");
        return this.resource('project', {
            path: '/projects/:project_id'
        }, function () {
            return this.resource('item', {
                path: '/items/:item_id'
            });
        });
    });


    (function () {
        App.IndexRoute =...