Nested component action complexity

Design
1

Is there a way to better architect this simple demo?

Specifically, my issue is that the parent component (top-bar) ends up having code in it that refers to the child component (search-box), when really, they are completely independent and should’t know about each other.

Without any nesting, you have to do 4 things to handle an action:

  1. Initial action: {{action 'search'}}
  2. Genericify the action: search: function() { this.sendAction('onSearch'); }
  3. Instance usage of the action: onSearch='runSearch'
  4. Instance handling of the action: runSearch: function() { console.log('Run search'); }

Adding just 1 level of nesting, this becomes 8 things

Thanks for any design advice.

2

I would do something like this since, arguably, your topbar shouldn’t have this partial in it either. If it’s specific to top-bar, then it can be moved in above the {{yield}}. There is some dead code in this fiddle, just didn’t bother to remove it.

JS Bin - Collaborative JavaScript Debugging (edited)

3

@jasonmit Thank you, yep that makes sense.
It solves the problem in this instance, but I worry that there might be other occasions in a large application where perhaps a component might find itself 3 levels deep and wanting to an action up to the route for handling.