JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script src="https://raw.github.com/emberjs/starter-kit/master/js/libs/ember-1.0.0-rc.2.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{#each parent in App.parents itemController='Parent'}}
        {{partial 'parent'}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="_parent">
    In parent: {{controller}}<br>
    Name: {{name}}<br>
    <br>
    {{#each child in children itemController='Child'}}
        {{ partial 'child' }}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="_child">
    Child name: {{name}}<br>
    Family Name: {{familyName}}<br>
    <br>
</script>

JavaScript

window.App = Ember.Application.create();

App.Parent = Ember.Object.extend({
    name: null,
    children: null,
});

App.Child = Ember.Object.extend({
    name: null,
});

App.ParentController = Ember.ObjectController.extend({
});

App.ChildController = Ember.ObjectController.extend({
    needs: 'parent',
    
    familyName: function(){
        return "my parent is " + this.get('controllers.parent.name')   
    }.property('controllers.parent.name')
});

App.child1 = App.Child.create({name: "C1"});
App.child2 = App.Child.create({name: "C2"});

App.c1_2 = Ember.ArrayProxy.create({content: [App.child1, App.child2]});

App.child3 = App.Child.create({name: "C3"});
App.child4 = App.Child.create({name: "C4"});

App.c3_4 = Ember.ArrayProxy.create({content: [App.child3, App.child4]});

App.parent1 = App.Parent.create({name: "parent1", children: App.c1_2});
App.parent2 = App.Parent.create({name: "parent2", children: App.c3_4});

App.parents = Ember.ArrayProxy.create({content: [App.parent1, App.parent2]});