JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/handlebars.js"></script>
<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/ember.js"></script>
<script src="https://raw.github.com/fieldphone/ember-rails/master/vendor/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="customers">
    <h3>Customers</h3>
    <ul>
        {{#each content}}
          {{view App.CustomerView}}
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="customer">
    
    {{view Ember.TextField valueBinding="firstname"}} / {{firstname}} 
    
    <ul>
        {{#each jobs}}
          {{view App.CustomerJobView}}
        {{/each}}
    </ul>

</script>


<script type="text/x-handlebars" data-template-name="customer_job">
    {{name}} <br>
    {{view Ember.TextField valueBinding="rate"}} * 
    {{view Ember.TextField valueBinding="hours"}} =
    {{total}}
</script>

CSS

li{
    margin: 5px 15px;
}

JavaScript

var App;

App = Ember.Application.create();

App.Address = DS.Model.extend({
    streetname: DS.attr('string'),
    streetnumber: DS.attr('string'),
    city: DS.attr('string'),
    state: DS.attr('string')
});
  
App.Customer = DS.Model.extend({ 
    firstname: DS.attr('string'),
    lastname: DS.attr('string'),
    jobs: DS.hasMany('App.Job')
});
  
App.Job = DS.Model.extend({
    customer: DS.belongsTo('App.Customer'),
    address: DS.belongsTo('App.Address'),
    name: DS.attr('string'),
    hours: DS.attr('number'),
    rate: DS.attr('number'),
    
    
    total: function() {
        var n;
        n = this.get('hours') * this.get('rate');
        return parseFloat(n);
    }.property('hours', 'rate')
    
});

App.store = DS.Store.create({
    revision: 7,
    adapter: DS.fixtureAdapter
});


App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'customers'
        }),
        customers: Ember.Route.extend({
            route: '/customers',
            showCustomer: Ember.Route.transitionTo('customer'),
            connectOutlets: function(router){
               router.get('applicationController').
                   connectOutlet('customers', App.Customer.find());
            }
        })
    })
});




App.Address.FIXTURES = [
    {id: '1', streetnumber: '1018', streetname: '4th Ave', city: 'Oakland', state: 'Ca'} 
];

App.Job.FIXTURES = [
    {id: '1', address_id: '1', customer_id: '1', name: 'bathroom addition', rate: "310", hours: "1000"}
];

App.Customer.FIXTURES = [
    {id: '1', firstname: 'Mike', lastname: 'Smith', jobs: ['1']}
];
  
App.ApplicationController = Ember.Controller.extend();
  
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.CustomersController = Ember.ArrayController.extend({
});

App.CustomersView = Ember.View.extend({
    templateName: 'customers'
});

App.CustomerView = Ember.View.extend({
   ...