EmberJS list control that can tell what was clicked

app.js

EvEditor = Em.Application.create({
  main: { componentList:[{name:'a'},{name:'b'},{name:'c'}]
});

EvEditor.ApplicationController = Em.Controller.extend()
EvEditor.ApplicationView = Em.View.extend({
  templateName: 'application'
});

EvEditor.ComponentListController = Ember.ArrayController.extend({
  removeItem: function(event){
    this.removeObject(event.context);
  };
});
EvEditor.ComponentListView = Ember.View.extend({
  templateName: 'component-list'
});

EvEditor.Router = Em.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router){
        router.get('applicationController').connectOutlet('componentList', EvEditor.get('main'componentList'))
      }
    })
  })
});

EvEditor.initialize()

application.handlebars

<p>
  select an editable area of the message to edit it or select a new item from the list below to insert
  {{outlet}}
</p>

component-list.handlebars

<ul>
  {{#each item in controller}}
    <li>
      <button {{action removeItem item target="controller"}}>{{item.name}}</button>
    </li>
  {{/each}}
</ul>