Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render component/helper from another one?

Tags:

ember.js

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}}
like image 381
Vasiliy Vanchuk Avatar asked Aug 26 '15 11:08

Vasiliy Vanchuk


2 Answers

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'}}
like image 156
GJK Avatar answered Sep 21 '22 14:09

GJK


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.

like image 32
max Avatar answered Sep 24 '22 14:09

max