Search code examples
ember.jshtmlbars

Ember js, HTMLbars: use component as param of a component


I want to to something like this:

{{component-one title=(component-two paramX paramY)}}

the component helper does not work here, I tried this

{{component-one title=(component 'component-two' params)}}

I also tried to make a helper rendering my component but failed. Seems that all answers I found are outdated like this one how can I invoke an ember component dynamically via a variable?

To be more specific for my usecase. I use tooltipster and want to render a tooltip with a button init.

{{#tool-tipster title=(my-comp params) ... }}

------ UPDATE---------

The problem is, that I need in the end a HTML String for the title with a button and a data-ember-action. I can't use the tpl of the wrapper component. If I extend the tool-tipster it looks like this:

export default TooltipsterComponent.extend({
  title: 'title as html string'
  //other tooltipster options go here with "optionname: optionvalue"
});

So I thought already about something like this:

title: function() {
  //load component and return rendered component by hand
}}

But this brings me back to my problem that I was not able to render any component by hand.

Thx for every input!

Cheers Pi

----- UPDATE -------

altrim on gitbub provided me the exact solution for my problem: https://github.com/altrim/tooltipster-content-component


Solution

  • You can do this, but you need to use the component helper twice:

    First to pass the component:

    {{wrap-component child=(component 'pass-component' name="blah")}}
    

    And next inside the wrap-component.hbs to call the component:

    {{component child}}
    

    Checkout this ember-twiddle.