JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="https://s3.amazonaws.com/builds.emberjs.com/ember-data-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>

<script type="text/x-handlebars" data-template-name='index'>
    <div>
        <h1>Polymorphism experiment</h1>
        <p>Experimenting on the generic settings class for driver and cars"</p>
        <hr />
        
        
        {{#each content}}
            <table class="specCard">
                <tr>
                    <td>  
                        Driver ID: 
                    </td>
                    <td>
                        {{id}}
                    </td>
                </tr>
                
                <tr>
                    <td>  
                        Driver Name: 
                    </td>
                    <td>
                        {{name}}
                    </td>
                </tr>
                
                <tr>
                    <td>  
                        Car Make: 
                    </td>
                    <td>
                        {{specialCar.make}}
                    </td>
                </tr>
                
                <tr>
                    <td>  
                        Drivetrain: 
                    </td>
                    <td>
                        {{specialCar.driveTrain}}
                    </td>
                </tr>
                
                {{#if specialCar.powerModifications}}
                <tr>
                    <td>  
                        Power modifications: 
                    </td>
                    <td>
                        {{specialCar.powerModifications}}
                    </td>
                </tr>
                {{/if}}
             ...

CSS

@import url(http://fonts.googleapis.com/css?family=Bitter);

body {
    font-family: 'Bitter', serif;
    color: #333;
    background-color: #efebe3;
    background-color: rgb(239, 235, 227);
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
    font-size: 1.2em;
}

table {
    border-radius: 3px;
}

table td {
    border: 2px solid #e1e1e1;
    padding: 3px;
    border-radius: 5px;
    background-color: #f2f2f2;
}

hr {
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
    padding-top: 10px;
}
hr:after {
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: #efebe3;
}

table.specCard {
    width: 500px;   
}

table.specCard td {
    width: 50%;   
}
}

JavaScript

App = Ember.Application.create({});

App.ApplicationAdapter = DS.ActiveModelAdapter;

App.IndexRoute = Ember.Route.extend({
  model: function() {
      
      //find all the available drivers
      return this.store.find('driver');
  }
});

/*
We now design what the objects relationship suppose to be.
Each drivers can have one car only for this example.
In addition, each drivers have specific car model assigned to them.

The idea is to have our application generates the correct car model
for each drivers based on the data return from the server.

For the sake of our example, each car is unique.
*/

App.Driver = DS.Model.extend({
    name: DS.attr("string"),
    expertise: DS.attr("string"),
    specialCar: DS.belongsTo("specialCar", {
        polymorphic: true,
        async: true
    })
});

App.SpecialCar = DS.Model.extend({
    driver: DS.belongsTo("driver"),
    make: DS.attr("string"),
    driveTrain: DS.attr("string"),
    imgUrl: DS.attr("string")
});

App.AeHachiRoku = App.SpecialCar.extend({
    engineSwap: "TRD Group A AE-101",
    model: "AE-86 Trueno Sprinter"
});

App.RxSeven = App.SpecialCar.extend({
    powerModifications: "Turbo",
    model: "RX-7"
});

App.Wrx = App.SpecialCar.extend({
    powerModifications: "unknown",
    model: "Impreza WRX STi Coupe Type B"
});

$.mockjax({
    url: '/drivers',
    response: function(settings) {
        var json = {
            drivers: [
                {
                    id: 1, 
                    name: 'Fujiwara',
                    special_car: { ///not that the key of the ajax call is using underscore, this is because we are using active model adapter
                        id: 1,
                        type: "aeHachiRoku"
                    }
                },
                {
                    id: 2, 
                    name: 'Keisuke',
                    special_car: {
                        id: 2,
                        type: "rxSeven"
                    }
                },
        ...