Deeply nested controllers

Design
2

I almost wrote a post asking this exact same thing last week.

First, depending on your use case, it might be worthwhile to look at this post. I suggested a solution that looks very similar to yours…and it got way poo-pooed. But the alternative proposed was a much better solution and has worked for 99% of my use cases.

However, I ran into this again where I didn’t really have the ability to handle this in the router (as what I build is really meant to be a component; but there’s no ItemComponent or ArrayComponent). I found a solution that’s a hack; but it works for me. (Can’t wait to see if there’s other solutions).

Essentially, rather than making the itemController an instance of an ObjectController, I make it an ArrayController…and use one of the private hooks for setting up the content to change the content to the related hasMany array. (that probably doesn’t make sense…Hard to describe)…

Here’s kinda what that would look like in your situation.

// Controllers/projects/projects.js
export default Ember.ArrayController.extend({
  itemController: 'projects/project/todos'
});

// Controllers/projects/project/todos.js
export default Ember.ArrayController.extend({
  project: null,
  itemController: 'projects/project/todo',
  _setupContent: function() {
    var content = this.get('content');

    if(content && Ember.isArray(content)) {
      var project = content;
      content = project.get('todos');
      this.set('project', project);
      this.set('content', content);
    } else {
      this._super.apply(this, arguments);
    }
  }
});

The net effect is that you’d no longer need the projects/project controller. But this also means that your project is no longer wrapped in a controller (which sorta brings us back to this issue all over again).

Anyway, food for thought.