JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.6.0/ember.min.js"></script>
<div id="container">
        
</div>

<!-- Application Template -->
<script type="text/x-handlebars" data-template-name="application">        
    {{outlet}}
</script>

<!-- Index Template -->
<script type="text/x-handlebars" data-template-name="index">
    {{#link-to 'listings'}}Go to listings{{/link-to}}
    <br />
    {{#link-to 'contacts'}}Go to contacts{{/link-to}}
</script>

<!-- Listings Template -->
<script type="text/x-handlebars" data-template-name="listings">
    This is the listings template
    <br />
    {{#each listing in listings}}
    {{listing.propertyCode}}
    {{/each}}
    <hr />
    {{render 'contacts' contacts}}
</script>


<!-- Listings Template -->
<script type="text/x-handlebars" data-template-name="contacts">
    Contacts
    {{#each contact in controller}}
    <div class="contact">
        {{contact.firstName}} 
        {{contact.lastName}}
    </div>
    <br />
    {{/each}}
</script>

JavaScript

/* app.js */
window.CRM = Ember.Application.create({
	LOG_TRANSITIONS: true,
	LOG_BINDINGS: true,	
	debugMode: true,
	rootElement: $('#container')
});

/* router.js */
CRM.Router.map(function() {
	this.resource('listings');
    this.resource('contacts');
});

/* Routes */
CRM.ContactsRoute = Ember.Route.extend({
    model: function() {
        return CRM.ContactsModel.getAllContacts();
    } 
});

CRM.ListingsRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({
            listings: CRM.ListingsModel.getAllListings(),
            contacts: CRM.ContactsModel.getAllContacts()
        });
    } 
});

/* Contacts Model */
CRM.ContactsModel = Ember.Object.extend();
CRM.ContactsModel.reopenClass({
    allContacts: [],    
    getAllContacts: function() {
        var promise = Ember.Deferred.create();        
        var contacts = [
            {
                id: 1,
                firstName: "Buzz",
                lastName: "Aldrin"
            },
            {
                id: 2,
                firstName: "Neil",
                lastName: "Armstrong"
            }
        ];
        
        /* Async call to resolve promise, pretend like we're a server */
   		Em.run.later(function() {
            contacts.forEach(function(contact) {
                 var model = CRM.ContactsModel.create(contact);
                 CRM.ContactsModel.allContacts.addObject(model);                                
            });                                    
            promise.resolve(CRM.ContactsModel.allContacts);            
        }, 300); 
        console.log(promise);
        return promise;
    }
});

/* Listings Model */

CRM.ListingsModel = Ember.Object.extend();
CRM.ListingsModel.reopenClass({
    allListings: [],    
    getAllListings: function() {
        var promise = Ember.Deferred.create();        
        var listings = [
            {
                id: 1,
                price: "$450,000",
                address: "169...