JSFiddle - React, Tailwind, and code Playground

by chopper

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.2.js"></script>
<script src="https://raw.github.com/MilkyWayJoe/cdnjs/master/ajax/libs/ember-data.js/0.12.00-latest20130328/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    <br />
    <i>Creating child elements from parent view</i><br />
    <br />
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="parents">
    <b>List</b><br />
    {{#each parent in controller}}
        {{ parent.name }} <br />    
        {{ render "kids" parent.children }}
    <a href="#" {{ action parent.children.new target="controller" }}>Parent View Make Kid</a> <font style="color:red"><- How do I get this to work?</font><br/>
    <br />
    {{/each}}
    
</script>

<script type="text/x-handlebars" data-template-name="kids">
    {{#each kid in controller}}
        > {{ kid.name }} <br />
    {{/each}}
    <a href="#" {{ action new }}> Kid Controller Make Kid</a><font style="color:green"> <- This works fine.</font><br />
</script>

CSS

em {font-style: normal}

JavaScript

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

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

App.KidsController = Em.ArrayController.extend({
    new: function() {
    this.content.createRecord({
        name: 'New Kid on the Block'
    })}
});

App.Router.map(function() {
    this.resource('parents', function() {
        this.route('parent', { path: ':parent_id' });
    });
});

App.IndexRoute = Em.Route.extend({
    redirect: function() {
        this.transitionTo('parents');
    }
});

App.ParentsRoute = Em.Route.extend({
    model: function() {
        return App.Parent.find();
    }
});

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

App.Kid.FIXTURES = [
{
    id: '1',
    name: 'Child1'
},
{
    id: '2',
    name: 'Child2'
}    
];

App.Parent = DS.Model.extend({
    name: DS.attr('string'),
    children: DS.hasMany('App.Kid'),
});

App.Parent.FIXTURES = [
{
    id: '1',
    name: 'parent1',
    children: ['1','2']
},
{
    id: '2',
    name: 'parent2',
    children: []
}
];