How to render component/helper from another one?

7
votes

I have render-component ( source ) which used to render components/helpers from controller fields. It worked fine for ember 1.9.1 but after updating up to ember 1.12.1 I found changes in API. After updating code I restore simple cases ( like render view by name from some property ). But largest part of functionality still broken.

I'm interesting about where can I read more about such things like

  • env ( which used inside components/helpers internal implementation )

  • morph ( I understand that it's a part of html-bars, but I'm interested in more documentation )

  • hooks ?

Can anyone share some experience at creating such helper ? Or way to find solution in such cases? ( I mean that this things not fully documented )

P.S. I know about component-helper from ember 1.11 -- but it doesn't allow render helpers ( with params) and using it I should define all properties in template. And when name of component/helper is dynamic -- I should pass different params / attributes.

Thx in advance

P.P.S

Some examples of functionality I want restore with my helper ( more examples and motivation you can find at helper page -- I just want note difference between my helper and build-in component-helper ):

{{#render-component componentName _param='btn-component' action="addSection"}}
{{render-component 'pluralize-component' ___params=hash}} // hash = { count:ungrouped.content.meta.total, single:"Object"}
{{#render-component 'componentName' _param=paramName someOption=someOptionValue}}
3
ember.js

3 Answers

5
votes

You've got quite a few questions here, but to answer the one in your title: Ember 1.11 introduced the component helper that allows you to dynamically render components.

componentName: 'someComponentName'

...

{{component componentName param=value someAction='someMapping'}}
3
votes

This article contains most of the information one might use to implement what I think you're getting after (compared to the standard component helper).

One notable out-of-the-box solution they suggest is the use of the (almost deprecated) dynamic-component addon.

{{dynamic-component
  type=theType
  boundProperty=foo
  staticProperty="bar"
  onFoo="fooTriggered"
}}

Hopefully this (and other suggestions from the article) steer you towards your solution.

1
votes

I was looking for an answer to this, ended up with a solution myself.

My scenario was that I wanted to pass in a component to another component and render it inside that component, which sounds like what this question was aiming for.

For those who don't clearly know how the {{component}} helper works:

Use it to render another component.
{{component "component-name" param1="value" param2="value"}}

This would work exactly the same way as:
{{component-name param1="value" param2="value"}}

For my scenario, I did this:

In the template invoking the first component:
{{my-comp-1 comp=(component "my-comp-2" param1="value" param2="value") other-param="value"}}

In my-comp-1's template, use the attribute used for the component:
{{component comp}}

That was all I needed to do.

This works perfectly as of Ember 2.7.0.