CODEWITHSUNDEEP
ember.jshtmlbars
PowPi
PowPi

Reputation: 163

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

Upvotes: 1

Views: 148

Answers (2)

Lux
Lux

Reputation: 18240

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.

Upvotes: 2

Grapho
Grapho

Reputation: 1654

Using the title=(component 'component-two' params) was the correct idea, but i am pretty sure you cant use positional params in the component helper other than for resolving the name.. so you would need to do this instead: title=(component 'component-two' params=params)

When you want to render that component inside of component-one you will need to use the component helper again like this: {{component title}}

This is at least how i get it to work.. I am fairly confident it is the "ember" way to do it.

Upvotes: 1

Related Questions