How to visualize a component / helper from another?

I have a render component ( source ) that was used to render components / helpers from controller fields. It worked great for ember 1.9.1, but after upgrading to ember 1.12.1, I found changes in the API. After updating the code, I restore simple cases (for example, rendering a view by name from some property). But most of the functionality is still broken.

I wonder where I can learn more about things like

  • env (which is used in the internal implementation of internal components / helpers)

  • morph (I understand that this is part of the html bars, but I'm more interested in the documentation)

  • hooks?

Can anyone share the experience of creating such an assistant? Or a way to find a solution in such cases? (I mean this is not fully documented)

PS I know about the helper component from ember 1.11 - but it does not allow rendering helpers (with parameters) and using it, I have to define all the properties in the template. And when the name of the component / helper is dynamic - I have to pass different parameters / attributes.

thanks in advance

PPS

Some examples of functionality that I want to restore using my assistant (more examples and motivations that you can find on the assistant page - I just want to note the difference between my assistant and the built-in assistant component):

{{#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}} 
+7
source share
3 answers

Here you have a few questions, but answer one in your title: Ember 1.11 introduced a helper component that allows you to dynamically render components.

 componentName: 'someComponentName' ... {{component componentName param=value someAction='someMapping'}} 
+5
source share

This article contains most of the information that you can use to implement what you think you are getting (compared to the standard auxiliary component).

One of the great solutions they offer is to use a (almost obsolete) dynamic component .

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

We hope that this (and other suggestions from the article) will direct you to your decision.

+3
source share

I was looking for the answer to this question, in the end I got a solution.

My scenario was that I wanted to transfer a component to another component and display it inside that component, which is similar to what this question was aiming for.

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

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

This will work just like:
{{component-name param1="value" param2="value"}}


In my script, I did this:

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

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

That was all I needed to do.

This works great with Ember 2.7.0.

0
source share

All Articles