JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script type="text/x-handlebars">
  <ul class="mod-choosable-list">    
    {{view Ember.CollectionView 
      contentBinding="App.teachersController"
      itemViewClass="App.TeacherView"
      tagName="div"
    }}
  </ul>
<div>
Ref: <a href="https://github.com/emberjs/ember.js/commit/134fc61b764ef5b464ab3ebef968716b7df5c50c">Ember.Instrumentation</a>
</div>
</script>

<script type="text/x-handlebars" data-template-name="teacher-view">
  <li><strong>{{view.content.name}}</strong></li>
  {{view App.StudentCollection
    itemViewClass="App.StudentView"
    tidBinding="view.content.id"
    tagName="ol"
  }}
</script>

<script type="text/x-handlebars" data-template-name="student-view">
    <button {{action toggleHere}}>Here</button> {{view.content.name}}
</script>

CSS

.in-attendance {
    background-color: forestgreen;
}

JavaScript

App = Ember.Application.create({});

App.Student = Ember.Object.extend({
    id: null,
    name: null,
    tId: null,
    inAttendance: false
});

App.Teacher = Ember.Object.extend({
    id: null,
    name: null,
    students: null
});

App.TeacherView = Ember.View.extend({
    templateName: 'teacher-view'
});

App.StudentView = Ember.View.extend({
    toggleHere: function() {
        Em.instrument("student.here", this.get('content'), function() {
            //mark student as in attendance
            this.set('inAttendance', !this.get('inAttendance'));
        }, this);
    },
    classNameBindings: ['inAttendance'],
    templateName: 'student-view',
    emptyView: Ember.View.extend({
        template: Ember.Handlebars.compile("The collection is empty")
    })
});

App.StudentCollection = Ember.CollectionView.extend({
    content: function() {
        return App.get('studentsController').filterProperty('tid', this.tid);
    }.property(),
    tid: undefined
});

App.set('teachersController', Ember.ArrayController.create({
    content: [
        App.Teacher.create({
        id: 1,
        name: "mr.katz",
        students: [2, 3]
    }),
        App.Teacher.create({
        id: 2,
        name: "mr.dale",
        students: [1]
    })
        ]
}));

App.set('studentsController', Ember.ArrayController.create({
    content: [
        App.Student.create({
        id: 1,
        name: "yehuda",
        tid: 2
    }),
        App.Student.create({
        id: 2,
        name: "tom",
        tid: 1
    }),
        App.Student.create({
        id: 3,
        name: "bob",
        tid: 2
    }),
        App.Student.create({
        id: 4,
        name: "scott",
        tid: 2
    })
        ]
}));

Em.subscribe('student', {
    ts: null,
    before: function(name, timestamp, payload) {
        ts = timestamp;
        //console.log('    before: ', name, JSON.stringify(payload));
        //return 'HelloFromThePast';
    },
    after: function(name, timestamp, payload,...