Emberjs CollectionView action on item controller

Question

I am having trouble firing actions to each individual item controller for items listed in a collection view. So far I have created the following

App.ItemsController = Ember.ArrayController.extend({
  itemController: 'item',
  sortAscending: true
});

App.ItemController = Ember.ObjectController.extend({
  isDrawVisible: false,
  actions: {
    toggleDraw: function() {
      this.toggleProperty('isDrawVisible')
    }
  }
});

App.ItemsView = Ember.CollectionView.extend({
  itemViewClass: App.ItemView,
  contentBinding: 'controller',
  tagName: 'ul'
});

App.ItemView = Ember.View.extend({
  controllerBinding: 'content',
  templateName: 'item',
  tagName: 'li'
});

And my template file is as such

{{#with view.content}}
  <a class="btn btn-lg btn-drill left bottom" {{action 'toggleDraw'}}>+</a>
{{/with}}

In the ember inspector each item in the list has been given the correct controller but I cannot seem to fire off the toggleDraw action on the ItemController

Update:

Found out that the action is being fired off but there is an error in the console stating nothing handled the action whenever the anchor element is clicked. Can anybody explain this?

Answer 1

You need to specify the item controller in your template, like this:

{{#with view.content controller='item'}}
  <a class="btn btn-lg btn-drill left bottom" {{action 'toggleDraw'}}>+</a>
{{/with}}

See the controller option in the with helper docs here .