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="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://raw.github.com/cmoel/tom_dale_ember_screencast/master/js/libs/ember-data.js"></script>
<!--TEMPLATES-->

<script type="text/x-handlebars">
  <div class="navbar" data-spy="affix">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
      </div>
    </div>
  </div>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="tasks">
  <div class="row-fluid span8 offset2 task-list">
    <div class="space-top"></div>
    <div class="accordion" id="accordion">
      {{partial 'tasks/newTask'}}
      {{#each task in controller}}
        <div class="accordion-group">
          {{render 'task' task}}
        </div>
      {{/each}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" id="tasks/_newTask">
  <div class="accordion-group">
    <div class="new-task-header accordion-heading" {{action newTask on="click"}}>
      <span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNew">New Task...</span>
    </div>
    <div id="collapseNew" class="accordion-body collapse">
      <div class="new-task accdion-inner">
        {{#if task.description}}
          <p>{{task.description}}</p>
        {{else}}
          <p>No description</p>
        {{/if}}
      </div>
    </div>
  </div>
</script>

<script type="text/x-handlebars" id="task">
  <div class="task">
  {{#linkTo 'task' task}}
    <div class="accordion-heading" {{action toggleEdit...

CSS

html, body, .ember-view {
  height: 100%;
  border: 0px;
}

.affix {
  z-index: 1;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
}

.task-list {
  position: relative;
  border: 0px;
  background-color: white;
  padding: 0px;
}

.space-top {
  margin-top: 42px;
}

.accordion-group {
  margin-top: -1px;
  margin-bottom: 0px;
  border: 0px;
}

.accordion-toggle {
  color: black;
}

a:hover {
  text-decoration: none;
}

.new-task-header, .task {
  border: solid 1px #E3E3E3;
  text-decoration: none;
}

.new-task-header:hover, .task:hover {
  background-color: #f5f5f5;
}

.new-task, .edit-task {
  margin-left: 5%;
  width: 90%;
  border-left: solid 1px #E3E3E3;
  border-right: solid 1px #E3E3E3;
  border-bottom: solid 1px #E3E3E3;
}

JavaScript

var App = Ember.Application.create();

//ROUTES
App.Router.map(function() {
  this.resource('tasks', function() {
    this.resource('task', {path: ':task_id'});
  });
});

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

App.TasksRoute = Ember.Route.extend({
  model: function() {
    return App.Task.find();
  }
});

App.TaskRoute = Ember.Route.extend({});

//CONTROLLERS
App.TasksController = Ember.ArrayController.extend({
  isEditing: null,
  startEdit: function(task) {
    
  },
  newTask: function() {
    console.log('new task');
  }
});

App.TaskController = Ember.ObjectController.extend({
  isEditing: false,
  toggleEdit: function() {
    this.set('isEditing', !this.get('isEditing'));
    if (this.get('isEditing')) {
      $('.in').collapse('hide');
      $('#' + this.get('collapseId')).collapse('show');
    }
    else $('#' + this.get('collapseId')).collapse('hide');
    console.log(this.get('isEditing'));
  },
  collapseId: function() {
    return "collapse" + this.get('id');
  }.property('id'),
  collapseHref: function() {
    return  "#collapse" + this.get('id');
  }.property('id')
});

//VIEWS
App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    var self = this;
    Ember.run.schedule('afterRender', function() {
      self.$('.navbar').affix({offset: -1000});
    });
  }
});

//HANDLEBARS HELPERS

//STORE DEFINITION
App.StoreOld = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
    /*DS.RESTAdapter.extend({
      url: 'http://localhost:3000'
    })*/
});
App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

//MODELS
App.Task = DS.Model.extend({
  summary: DS.attr('string'),
  description: DS.attr('string'),
  start: DS.attr('string'),
  end: DS.attr('string'),
  recurrence: DS.attr('string')
});

//FIXTURE DATA
App.Task.FIXTURES = [{
  id: "q5ji9chrh1hcu05dohvrf4aumc",
  summary: "Test",
  description: null,
  start:...