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="index">
    <a href="#/promotions/1/entrants">Click me</a>
</script>
<script type="text/x-handlebars" data-template-name="entrants/index">
    Entrants
</script>

CSS

body { margin: 3em; }

JavaScript

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

App.Store = DS.Store.extend();

App.Router.map(function() {
    this.resource('promotions', function() {
        this.resource('promotion', { path: '/:promotion_id' }, function() {
            this.resource('entrants', function() {
                this.resource('entrant', { path: '/:entrant_id' });
            });
        });
    });
});

App.PromotionRoute = Ember.Route.extend({
    model: function() {
        return { id: 1, name: 'My Promotion' };
    }
});

App.EntrantsIndexRoute = Ember.Route.extend({
    model: function(params) {
        console.warn('EntrantsIndexRoute', '\nparams:', params, '\nparams.promotion_id:', params.promotion_id, '\narguments:', arguments);
        console.log('params should be:', { promotion_id: 1 });
        console.log('The queried URL should be:', '/entrants?promotion_id=1');
        return App.Entrant.find({promotion_id: params.promotion_id});
    }
});

App.Entrant = DS.Model.extend({
    name: DS.attr('string')
});