JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="activities/new">
    <h1>Create a new activity</h1>
    
    {{#each childList}}
        <label>
            {{view Ember.Checkbox}}
            {{name}}
        </label><br />
    {{/each}}
    {{view Ember.TextField valueBinding="name"}}
    <button {{action create}}>Create</button>
</script>

<script type="text/x-handlebars" data-template-name="activities/edit">
    <h1>Edit an activity</h1>
    
    {{#each childList}}
        <label>
            {{view Ember.Checkbox}}
            {{name}}
        </label><br />
    {{/each}}
    {{view Ember.TextField valueBinding="name"}}
    <button {{action update}}>Update</button>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <table border="1">
        <tr>
            <td>
                <b>Activity name</b>
            </td>
            <td>
                <b>Children</b>
            </td>
            <td>
            </td>
        </tr>
        {{#each activity in activityList}}
        <tr>
            <td>
                {{activity.name}}
            </td>
            <td>
                {{#each child in activity.children}}
                    {{child.name}},
                {{/each}}
            </td>
            <td>
                {{#link-to "activities.edit" activity}}Edit{{/link-to}}
            </td>
        </tr>
        {{/each}}
    </table>
    {{#link-to "activities.new"}}Create a new activity{{/link-to}}
</script>

JavaScript

App = Ember.Application.create();

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

App.Child.FIXTURES = [
  {
    id: 1,
    name: 'Brian'
  },
  {
    id: 2,
    name: 'Michael'
  },
  {
    id: 3,
    name: 'James'
  }
];

App.Activity = DS.Model.extend({
    children: DS.hasMany('child',{async:true}),
    name: DS.attr('string')
});

App.Activity.FIXTURES = [
    {
        id: 1,
        children: [1, 2],
        name: 'Test activity'
    }
];

App.Router.map(function() {
    this.resource('activities', function() {
        this.route('new');
        this.route('edit', { path: '/:activity_id/edit' });
    });
});

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

App.ActivitiesNewController = Ember.ObjectController.extend({
    childList: [],
    actions: {
        create: function(model) {
            this.content.save();
            this.transitionToRoute('index');
        }
    }
});

App.ActivitiesEditController = Ember.ObjectController.extend({
    childList: [],
    actions: {
        update: function(model) {
            this.content.save();
            this.transitionToRoute('index');
        }
    }
});

App.ActivitiesNewRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('childList', this.store.find('child'));
        controller.set('content', this.store.createRecord('activity'));
    }
});

App.ActivitiesEditRoute = Ember.Route.extend({
    model: function(params) {
        this.store.find('activity', params.activity_id);
    },
    setupController: function(controller, model) {
        controller.set('childList', this.store.find('child'));
        controller.set('content', model);
    }
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('activityList', this.store.find('activity'));
    }
});