Referencing components/views from controllers/components

#1

Coming from a Cocoa background, it feels natural to me to be able to have a reference to views and components in a controller.

Let’s say I have a component that has a method someMethod. I want to be able to trigger this from outside of the component (let’s say from a button on the same page). Is it possible to store a reference to the component in the controller, so that I can call this method? Or is this a big Ember anti-pattern?

I could extend this question by asking whether it is possible to reference specific DOM elements from a view or component.

I think having such a possibility opens up a lot of flexibility. Right now the only way I see to achieve such things is to use property bindings or using jQuery to select DOM elements.

#2

The mantra these days is data down actions up. so your component should trigger some method based on a change in the data. If the component wants to change the data it fires an action up for whoever owns the data to handle. Also controllers are going away to be replaced with routable components, think component that a route is tied to. Views are basically deprecated in favor of components. You architect your application as a nested set of components that all fire actions up and observe data that was passed to them. You will be using bindings a lot, you can pretty much avoid jquery most of the time unless you’re integrating a third party lib. As further reinforcement for this architecture in 2.0 bindings will be one way. Hopefully that helps a bit.

#3

Thanks! I am aware of the upcoming deprecation of controllers and views. However, it still seems odd to me that the only thing going ‘down’ or ‘across’ is data. What if I want to trigger an action in another component, without any data.

For example: Let’s assume I’m still using a controller. I have a button on top of my page. When the user clicks it, the controller receives this action. After it runs some logic, I want a component somewhere else on the page to flash. How does the controller call the flash method on this component? There is no data to be bound or passed, it is just a simple function being called.

I have a creepy feeling that the current Ember structure works great for the ‘data down / actions up’ paradigm, but doesn’t offer enough flexibility underneath to do things like I described above. Or am I in the wrong here and is there actually a clean way to solve this problem?

#4

Checkout this discussion Communication between components

The short of it is that it’s not really a fully fleshed out path just yet but there are a number of ways to accomplish what you’re asking.

#5

Maybe consider this for now http://www.thesoftwaresimpleton.com/blog/2015/04/27/event-bus/

or more hacky way; If you render each component with a static id e.g {{button id="saveProject"}} you can get access to it via Ember.View.views['saveProject'] and do whatever you want e.g. triggerAction etc

#6

Ah good to see I’m not the only one with this problem :smile:. I came up with the same solution as this one. Hopefully the Ember team recognizes the need for a solution so that we don’t have to rely on custom mixins or plugnins.

Thanks!

#7

Where is this deprecation of controllers mentioned? Is there a blog post that I missed somewhere?

#8

ObjectController was deprecated in 1.11 http://emberjs.com/deprecations/v1.x/#toc_objectcontroller as proposed in the Ember 2.0 RFC (see Routeable Components, ArrayController is also mentioned in the discussion) and mentioned in the lastest blog post The Transition to Ember 2.0 in Detail