CollectionView.itemViewClass doesn't response to mouse click event

Hi,

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 https://github.com/kceiw/treegrid-emberjs)

{{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 (https://github.com/kceiw/treegrid-emberjs/blob/master/js/views/treeGridRow_view.js) with the controller (https://github.com/kceiw/treegrid-emberjs/blob/master/js/controllers/treeGridRow_controller.js)? What I do right now is to alias “content” in TreeGridRowsView (https://github.com/kceiw/treegrid-emberjs/blob/master/js/views/treeGridRows_view.js) 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