Ember ListView

Demonstrates classNameBindings not working on Ember.ListViewItems

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com/list-view/list-view-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
  {{collection App.ListView contentBinding="controller"}}
</script>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ember-list-view {
  overflow: auto;
  position: relative;
  width: 100%;
}

.first-child {
  background-color: yellow;
}
    
.ember-list-item-view {
  position: absolute;
  font-size: 17px;
  font-weight: 200;
}

JavaScript

App = Ember.Application.create();

App.IndexController = Ember.ArrayController.extend({
  content: []
});
    
App.ListView = Ember.ListView.extend({
  height: 500,
  rowHeight: 50,
  width: 500,
  itemViewClass: Ember.ListItemView.extend({
    classNameBindings: ['isFirstObject:first-child'],
      template: Ember.Handlebars.compile('{{name}}{{#if view.isFirstObject}}(first child){{/if}}'),

    firstObjectBinding: Ember.Binding.oneWay('parentView.content.firstObject'),
    isFirstObject: function () {
      return Ember.guidFor(this.get('content')) === Ember.guidFor(this.get('firstObject'));
    }.property('content', 'firstObject')
  })
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    var content = [];
    for (var i = 0; i < 10000; i++) {
      content.push({name: "Item " + i});
    }
    controller.set('content', content);
  }
});