CODEWITHSUNDEEP
javascriptember.js
Charles
Charles

Reputation: 11768

How to set the context of a EmberJS component?

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: http://emberjs.jsbin.com/rwjblue/443/edit?html,css,js,output

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:

http://emberjs.jsbin.com/cofobanoca/edit?html,css,js,output

and a derivate of it

http://emberjs.jsbin.com/gipawemipe/1/edit?html,css,js,output

They are pretty much the same except that in the second link, the component is dynamically create inside an action.

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

EDIT: 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), I want to call the OK action of LoginModalContent to be able to get the values of the forms (defined in LoginModalContent) using e.g. this.get('username').

Upvotes: 1

Views: 277

Answers (1)

Terseus
Terseus

Reputation: 2212

They are pretty much the same except that in the second link, the component is dynamically create inside an action.

There you're not creating a component, just rendering a view, and if you don't specify a controller for a view Ember creates one for you, that's why {{this}} is "generated application controller" in the second example.

That also explains why the action handler of the XBarComponent doesn't work in the second example, since the view is missing the component controller.

If you want to programatically insert components the component helper is your best bet, it renders components by its name while letting Ember handle the view/controller/subcomponents management.

Upvotes: 0

Related Questions