CollectionView.itemViewClass doesn't response to mouse click event



I’m learning Ember.js and trying to create a tree grid control with it. The idea is a node in the tree shows in a row in the grid. The parent node can be expanded/collapsed. If it’s expanded, it’s children nodes will show up in the grid. Otherwise, it’s children are hidden.

I used an ArrayController (TreeGridRowsController) and CollectionView (TreeGridRowsView) for the whole grid content (all the rows). And also set itemController (TreeGridRowController) and itemViewClass (TreeGridRowView) for individual row. TreeGridRowView has a template “treeGridRow” to show individual row.

(The complete source is at

{{render “treeGridRows” rows}} to show all the rows.

As I don’t fully understand Ember.js, I have a few questions regarding my approach:

  1. How to associate the view for individual row TreeGridRowView ( with the controller ( What I do right now is to alias “content” in TreeGridRowsView ( to the controller. Is it the right way to do? It seems strange to me that a view’s content is a controller.

  2. TreeGridRowView doesn’t response to mouse click event or any other event. Am I missing anything here? Is there a way to debug it?

Thanks, Mao