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?

You seem to have a typo in your actions hash. Missing bracket? — Hrishi
Thanks for that, i'll update te question. I was trying to convert the code from coffeescript so it was easier to read. I must have missed out the brackets. — tomasbasham

NicholasJohn16 NicholasJohn16 · Accepted Answer · 2014-04-14T01:35:46

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.

Emberjs CollectionView action on item controller

1 Answers