JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://gist.github.com/raw/2931791/ember.js"></script>
<script type="text/x-handlebars">
    <nav>
        <ul>
            <li>{{#linkTo index}}Home{{/linkTo}}</li>
            <li>{{#linkTo projects}}Projects{{/linkTo}}</li>
        </ul>
    </nav>
    {{#if currentProject}}
    <div class="current-project">
        <p>This block is uses controllers.project</p>
        <p>Current project: {{currentProject.title}}</p>
        <p>This area shouldn't appear until you've selected a project</p>
        <p>These links hrefs don't update when the project changes</p>
        <p>
            {{#linkTo project.posts currentProject}}posts{{/linkTo}}
            {{#linkTo project.details currentProject}}details{{/linkTo}}
        </p>
        <p>Clicking them causes "Uncaught RangeError: Maximum call stack size exceeded"</p>
    </div>
    {{/if}}
    
    {{#if currentProjectContent}}
    <div class="current-project">
        <p>This block is uses controllers.project.contnet</p>
        <p>Current project: {{currentProjectContent.title}}</p>
        <p>These links hrefs don't update when the project changes</p>
        <p>
            {{#linkTo project.posts currentProjectContent}}posts{{/linkTo}}
            {{#linkTo project.details currentProjectContent}}details{{/linkTo}}
        </p>
    </div>
    {{/if}}
    
    <div class="content">{{outlet}}</div>
    <div>
        <p>Current path: {{currentPath}}</p>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Home</h1>
</script>

<script type="text/x-handlebars" data-template-name="projects">
    <h1>Projects</h1>
    <ul>
    {{#each project in controller}}
        <li>{{#linkTo project project}}{{project.title}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    
    <div class="content">{{outlet}}</div>
</script>

<script type="text/x-handlebars"...

CSS

a.active {
   font-weight: bold;  
}

nav, p {
   padding: 0.5em; 
}

.content {
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #CCC;
}

.current-project {
    padding: 0.5em;
    margin: 0.5em;
    border: 1px solid #F00;
}

JavaScript

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

projects = [
    Ember.Object.create({id: "one", title: "One"}),
    Ember.Object.create({id: "two", title: "Two"})
]

App.ApplicationController = Ember.Controller.extend({
    needs: "project",
    currentProjectContentBinding: "controllers.project.content",
    currentProjectBinding: "controllers.project"    
});

App.ProjectController = Ember.ObjectController.extend({

});

App.ProjectsController = Ember.ArrayController.extend({    

});

App.ProjectRoute = Ember.Route.extend({
    model: function(params) {
        return projects.findProperty("id", params.project_id);
    },
    // clear current project when we exit this section
    exit: function() {
        this._super();
        this.controllerFor("project").set("content", null);
    }
});

App.ProjectsRoute = Ember.Route.extend({
    model: function() {
        return projects;
    }
});

App.Router.map(function() {
  this.resource("projects", function(){
      this.resource("project", {path: "/:project_id"}, function(){
        this.route("posts")
        this.route("details")
      });
  });
});