2

I have a "container" component

# components/container-component.js

import Ember from 'ember';
export default Ember.Component.extend({
  displayComponent: 'simple-box'
});

The template is

# templates/container-component.hbs

<div>
  {{component displayComponent}}
</div>

Now, from within "container-component" instance. How can I access the computed "displayComponent" instance?

Any ideas on how I could go about it?

When I use the get method I get the string identification of the component

this.get('displayComponent') 
# returns (String) 'simple-box'
Prakash Raman
  • 13,319
  • 27
  • 82
  • 132
  • What do you want to do with that instance? – ykaragol Dec 12 '16 at 07:20
  • Thanks, could you take look at my comment ? http://stackoverflow.com/questions/41089339/access-the-instance-of-the-component-from-parent-component-in-emberjs?noredirect=1#comment69398007_41089703 – Prakash Raman Dec 12 '16 at 08:39

1 Answers1

7

There is not a built-in way of retrieving children components from the parent component's js file as far as I know. If you really want to achieve this, please refer to my twiddle I have prepared for you.

As you can see from the code; within the template parent passes itself to the child and child registers itself to the parent. Note that this is an illustration of code smell and this is something I never use in my projects.

Because, in my opinion what you are trying to achieve is a clear violation of many principles that ember is built upon. Why do you want to get the child property from the parent directly? You can register actions to child component and get notified for various events within the child component. Why do you need direct access? It is better for a component to be working independently by itself. In this kind of approach you are polluting parent's code with child component's internal design considerations. You can query DOM tree via jquery within parent but getting the child component instance created for you by Ember infrastructure is a sign that you are trying to design something that is out of Ember's approach. We can help you better if you post another question (or modify this one) to describe your intention. May be someone could lead you to a better design. Best Regards.

feanor07
  • 3,328
  • 15
  • 27
  • Brilliant explanation. Thanks! Yes, I implemented it the same way as you showed. Yes, I seem to violating the principle. Which means, I should try and accomplish it differently. So the reason I want the inter component communication. Is because I need a particular dom element to be updated in the parent component. And may be vice-versa. Could you explain about what you said "...get notified for various events". Also, I am thinking that having a "service" which can be shared by both components. Does that make sense? – Prakash Raman Dec 12 '16 at 08:33
  • what I'm trying to say is that; child component should notify the parent component via actions only when needed. this will provide a clear separation of concerns between the child and the parent (the client should be placed within another parent, and the parent should contain other childs). You can refer to [official ember guide](https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/) for notifying parent about changes in the child. I will prepare two new twiddles to illustrate the proper way of communication between child-parent in the evening hopefully. – feanor07 Dec 12 '16 at 08:43
  • Regarding sharing a service; it might be better to see some code in action with small twiddles. It should make sense in same cases but not in others. I would go for sending actions from child and handling those actions in parent initially. – feanor07 Dec 12 '16 at 08:48
  • Thanks so much! You are being a lot of help. Yes, I can just pass a simple 'action' to the chlid component from the parent. That actually should solve my problem. – Prakash Raman Dec 12 '16 at 08:54
  • That's great. Initially ember has some learning curve that might confuse you especially if you have experience with other frameworks or pure javascript. After you pass over that curve ember becomes fun to play. good luck! – feanor07 Dec 12 '16 at 08:57
  • Ya, it is a little tricky, But enjoying every part of it :) Could you take a look at my other answer :) If you have the time http://stackoverflow.com/questions/41115025/right-way-to-make-ajax-get-and-post-calls-in-emberjs – Prakash Raman Dec 13 '16 at 06:51
  • I have seen your nee question; I am sure there are many people in the community who can answer it better than me. If no one does; I might write a few things ;) – feanor07 Dec 13 '16 at 07:04
  • Thanks :) You have been a lot of help! – Prakash Raman Dec 13 '16 at 07:21