How do I invoke Ember's component helper programmatically? - ember.js

Question

I have a list of foos:
[
{ name: 'Foo 1' type: 'important' },
{ name: 'Foo 2' type: 'normal' },
{ name: 'Foo 3' type: 'purple' }
]
I want to render that list, but some of them have special handling -- not just a class, but entirely different markup.
My first instinct would be to use the component helper:
{{#each foos as |foo|}}
{{component (join 'foo-' foo.type) foo=foo}}
{{/each}}
The downside to that is that I must define a component for each type and the server may send me new types that I don't know about. So I'd like to fall back to a basic foo-generic component if the foo-${type} component isn't defined.
To do that, I figured I'd create a helper:
{{#each foos as |foo|}}
{{foo-entry foo}}
{{/each}}
// app/helpers/foo-entry.js
Ember.Helper.helper(function([ foo ]) {
// ...
});
But I'm left with two questions:
how do I get a container inside that helper so I can check whether component:foo-${foo.type} exists?
how do I invoke the component helper from within another helper?

Answer 1

I think I can do it with a component instead of a helper:
// app/pods/foo-entry/component.js
export default Ember.Component.extend({
tagName: null,
foo: null,
componentName: Ember.computed('foo.type', function() {
const type = this.get('foo.type');
const exists =
this.container.lookupFactory(`component:foo-${type}`) != null ||
this.container.lookupFactory(`template:foo-${type}`) != null;
return exists ? `foo-${type}` : 'foo-generic';
})
})
{{!-- app/pods/foo-entry/template.hbs --}}
{{component componentName foo=foo}}