how can I invoke an ember component dynamically via a variable?

Question

Lets say I have an array of widget objects on my controller and each widget object has member variable that is assigned the name of a component class. How can I get my template to invoke that component?

//widgets[0].widget.componentClass="blog-post"

{{#each widget in widgets}}
    {{widget.componentClass}}
{{/each}}

Obviously the above example just spits out a series of string versions of the widget component classes. This however does work (as long as you got everything set up right):

//widgets[0].widgets.viewClass="blogPost"

{{#each widget in widgets}}
    {{view widget.viewClass}}
{{/each}

That was our previous implementation, but we weren't happy with it. We're currently using a custom {{renderWidget ...}} tag with a handlebars helper as described here: Calling Handlebars {{render}} with a variable name. The default render helper has a similar problem where it would not invoke a render on the contents of a variable name. I'd be willing to write a custom component handlebars helper but I can't even figure out where to start. Thanks.

StrangeLooper · Answer 1 · 2014-02-05T23:13:28.763

12

I tried this and it seems to work, but its just a lot of guesswork on my part:

Ember.Handlebars.registerHelper('renderComponent', function(componentPath, options) {
  var component = Ember.Handlebars.get(this, componentPath, options),
      helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);

  helper.call(this, options);

});

and you use it the same way:

{{#each widget in widgets}}
  {{renderComponent widget.componentClass widget=widget}}
{{/each}}

edited Feb 05 '14 at 23:13

answered Feb 05 '14 at 22:57

StrangeLooper

549
5
11

using this pattern how would I go about modifying the call the the resolved component in order to pass some arbitrary parameter values (for instance if its a form input component, set the `value` parameter), as well as set the content that should be inserted in the component's `{{yield}}`? – Bill Dami May 01 '14 at 21:07
1

@StrangeLooper This doesn't work in Ember 1.10, the error states that you should use a Component or makeBoundHelper instead. after changing it to a bound helper i get an error saying the **renderComponent** helper was not found. any clues? a refactored version for Ember 1.10 perhaps? thanks – Nexus Feb 22 '15 at 08:13

score 11 · Accepted Answer · answered Jan 20 '15 at 01:52

11

In Ember 1.11, the new component helper allows you to do this:

{{#each widget in widgets}}
  {{component widget.componentClass}}
{{/each}}

As of today, Jan 19th, 2015, 1.11 is not a stable release but this feature is in the canary version.

answered Jan 20 '15 at 01:52

wbyoung

22,383
2
34
40

Very nice feature, just not sure how to pass through additional parameters. – WooDzu Jan 22 '15 at 23:02
`{{component widget.componentClass var1=item var2=this}}` should work? – Charles Jan 18 '16 at 14:15

zaius · Answer 3 · 2014-03-26T03:07:00.027

Sounds like I've run into a lot of the same problems as you. All components are registered as top level helpers, which means you can do a similar method to the one you linked of creating a handlebars helper that does the lookup. Like this:

Ember.Handlebars.registerHelper('lookup', function(component, options) {
  component = Ember.Handlebars.get(this, component, options);
  Ember.Handlebars.helpers[component].call(this, options);
});

Then in your template:

{{#each widget in widgets}}
  {{lookup widget.componentClass}}
{{/each}}

Here's a jsbin with a working example: http://jsbin.com/ucanam/2482/edit

Hope that helps!

-- edit --

For some reason, the new version of handlebars makes calling helpers from other helpers impossible. Instead you can lookup the template through the Ember.TEMPLATES global. I've updated the JSBin to use this method.

You can also get the template via options.data.view.templateForName(component), but it feels a bit more brittle than Ember.TEMPLATES.

-- edit 2 --

It's changed again. Ember.Handlebars.resolveHelper is now the correct way to do it. See @StrangeLooper's answer.

This seems to be not working for latest ember. Any suggestions? Thanks. — Deewendra Shrestha, Dec 06 '13 at 22:52
just tried implementing this helper and it doesn't seem to be invoking the js part of the component, just the template part. — StrangeLooper, Feb 05 '14 at 20:03

score 2 · Answer 4 · answered Sep 22 '14 at 17:58

If you are using Ember CLI and Coffeescript here is a version for that. Create the following file in app/helpers/render-component.coffee:

renderComponent = (componentPath, options)->
  helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentPath)
  helper.call this, options

`export { renderComponent }`
`export default Ember.Handlebars.makeBoundHelper(renderComponent)`

From there, you can call {{render-component "foo-bar"}} from a template.

Since the Ember ecosystem is ever changing, here is the version I tested it on:

Ember-CLI v0.0.43
Ember v1.7.0
Handlebars 1.3.0

how can I invoke an ember component dynamically via a variable?

4 Answers4

-- edit --

-- edit 2 --

Linked

Related