How to set action in itemController?

Question

Ember.js

Hi all!
I decided to take a look at emberjs for myself. The framework is actively moving towards 2.0 and even those recent examples that are on the network no longer work with the current version without finishing. The question is banal, there is a controller that is inherited from ArrayController, in its template I display elements, the controller itself:

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

sample:

{{#each item in model}}
<div>
    <h1>{{item.name}}</h1>
    <a {{action "removeItem"}}>remove</a>
</div>
{{/each}}

the itemController itself

App.ItemController = Ember.Controller.extend({
  actions: {
    removeItem: function() {
      var item = this.get('model');
      item.destroyRecord();
    }
  }
});

in the end, everything is displayed, but when I click on delete, I get
Error: Nothing handled the action 'removeItem'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
that is, the action in the child controller is not intercepted if the desired action is inserted into the ListController

removeList: function() {
      console.log('???');
      var item = this.get('model');
      console.log(item);
}

then it is executed accordingly, but the model is from the current controller, but how to get the desired element and delete it? .. pass the ID of the current item, search in the list and delete it? but I understand that this is not exactly an ember-way?
Accordingly, there are two questions, why is the action not processed in the child controller, or how can one do without it?
And maybe someone can advise some materials for studying, otherwise the official guide does not give answers to all questions, it describes everything with separate examples, but does not give any integrated approach to everything. Even a little discouraging is such a simple moment that the guide shows how to use the ObjectController, but when you try to use it, you get information that it has already been deprecated, just use the Controller. Accordingly, the use of ObjectController and itemController directly in the template solves the issue with the action in the child, but when reworked to "new" standards (Controller and itemController in the controller code), it stops working.
Maybe the question is very stupid, but I'm looking at it for the first day and still can't figure out where I'm making a mistake.

Answer 1

Hello. Welcome to the Ember community.
Why is there an itemController at all? I would do like this:

{{#each item in model}}
<div>
    <h1>{{item.name}}</h1>
    <a {{action "removeItem" item}}>remove</a>
</div>
{{/each}}

App.ListController = Ember.Controller.extend({
  actions: {
    removeItem: function(model) {
      model.destroyRecord();
    }
  }
});

Or if you are supposed to have some kind of list element logic, then you need to use components:

App.ItemListComponent = Ember.Component.extend({
  item: null,

  actions: {
    removeItem: function() {
      var item = this.get('item');
      item.destroyRecord();
    }
  }
});

{{#each item in model}}
    {{item-list item=item}} //извиняюсь за тавтологию
{{/each}}

Passed from controller to route, and then from route to route up the chain.
Now you probably can’t find such a comprehensive up-to-date tutorial, Ember is developing by leaps and bounds.
Yes, not a normal question.