jeudi 24 mars 2016

How do I invoke Ember's component helper programmatically?

I have a list of foos:

[
  { name: 'Foo 1' type: 'important' },
  { name: 'Foo 2' type: 'normal' },
  { name: 'Foo 2' 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 ]) {
  // How do I get a container here?

  // And how do I call the component helper here?
});




Aucun commentaire:

Enregistrer un commentaire