1

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

Community
  • 1
  • 1
PowPi
  • 164
  • 1
  • 1
  • 10

2 Answers2

2

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.

Lux
  • 17,835
  • 5
  • 43
  • 73
  • Thx for the twiddle. The problem is that I can't use the wrappers tpl :(. Sorry for missing this information. I updated the question. Is there a other way you can think of? thx alot – PowPi Jun 02 '16 at 07:15
1

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.

Grapho
  • 1,654
  • 15
  • 33
  • even if I leave the params away I always only get a "Cannot read property 'getState' of null". I am actually not quite sure what you mean with "use the component helper again" for the title. thx for the help – PowPi Jun 01 '16 at 15:26
  • oh... i see what you are trying to do now... the title attribute normally on an html element can only be a string.. you cannot pass a component into title – Grapho Jun 01 '16 at 17:43
  • instead, i would search for an ember addon or a js plugin that handles custom tooltips – Grapho Jun 01 '16 at 17:45
  • Your right, it must be a string. So far I had a helper connecting some lines html. Is there no way to get the components rendered html with the data-ember-action? At this point of my project changing away from tooltipster is no option :( . Updated Question. – PowPi Jun 02 '16 at 07:13