JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.1.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
<script type="text/x-handlebars" data-template-name="items">
    {{#each model}}
        {{render "item" this}}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="item">
    <h3 {{action toggleSubitems}}>{{name}}</h3>
    {{#if isShowingSubitems}}
        <div class="panel">
            {{render "subitems" subitems}}
        </div>
    {{/if}}
</script>
<script type="text/x-handlebars" data-template-name="subitems">
    <ul>
        {{#each model}}
            <li>{{render "subitem" this}}</li>
        {{/each}}
    </ul>
    <h2>Problem - This changes based on most recently opened Item: <code>{{controllers.item.id}}</code></h2>
</script>
<script type="text/x-handlebars" data-template-name="subitem">
    <h5>{{name}}</h5>
</script>

CSS

body { margin: 3em; }
h3 { text-decoration: underline; color: #2ba6cb; cursor: pointer; }

JavaScript

window.App = Ember.Application.create({ LOG_TRANSITIONS: true });

App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter.extend({ latency: 0 })
});

App.Router.map(function() {
    this.resource('items', function() {
        this.resource('item', { path: '/:item_id' }, function() {
            this.resource('subitems', function() {
                this.route('subitem', { path: '/:subitem_id'})
            });
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() { this.transitionTo('items'); }
});

App.ItemsRoute = Ember.Route.extend({
    model: function() { return App.Item.find(); }
});

App.ItemRoute = Ember.Route.extend({
    model: function(params) { return App.Item.find(params.item_id); },
    setupController: function(controller, model) {
        controller.setProperties({
            model: model,
            isShowingSubitems: true
        });
    }
});

App.SubitemsRoute = Ember.Route.extend({
    model: function() { return this.modelFor('item').get('subitems'); }
});

App.ItemsController = Ember.ArrayController.extend();

App.ItemController = Ember.ObjectController.extend({
    toggleSubitems: function() {
        this.set('isShowingSubitems', !this.get('isShowingSubitems'));
        if (this.get('isShowingSubitems') === true) this.transitionToRoute('item', this);
    }
});

App.SubitemsController = Ember.ArrayController.extend({
    needs: ['item'],
    item: null,
    itemBinding: 'controllers.item'
});

App.SubitemController = Ember.ObjectController.extend({
    needs: ['item'],
    item: null,
    itemBinding: 'controllers.item'
});

App.Item = DS.Model.extend({
    name: DS.attr('string'),
    subitems: DS.hasMany('App.Subitem')
});

App.Item.FIXTURES = [
    { id: 1, subitems: [1, 2], name: 'Item One' },
    { id: 2, subitems: [3, 4], name: 'Second Item' },
    { id: 3, subitems: [5, 6], name: 'Item the last' }
];

App.Subitem = DS.Model.extend({
    name: DS.attr('string'),
    item:...