How to set the context of a component?

1

I found on this page a great example of https://github.com/emberjs/ember.js/issues/11043 how to inherits from a component. Here is the example: JS Bin - Collaborative JavaScript Debugging

I played a bit with and especially with actions and come to this question:

How can I set the context of the component?

Consider the following examples:

and a derivate of it

The are pretty much the same but in the second one, the component is dynamically added inside an action.

My question is, why is {{this}} in the second example a “generated application controller” and not a “App.XBarComponent”?

2

Maybe I was not clear.

What I want to achieve is to render a modal which contains inputs fields. This should be rendered inside the application template (using outlet) as a popup over the whole page. The Modal is built with two components just like foo and bar. BaseModal (which is Foo) and LoginModalContent (which is Bar) are better names.

On click on OK (which is defined in BaseModal, because the button in in BaseMobal), I want to call the OK action of LoginModalContent to be able to get the values of the forms using e.g. this.get('username').

This seams to only work when BaseModal know the instance of LoginModalContent that’s why I’m trying to pass it using innerComponent=this.

I hope it’s clearer now :slight_smile: