Component References

Controllers often need to get references to components in order to update the UI or access component properties. There are two common ways of doing that:

• Using the component references passed to the event handler
• Tagging a component with a reference and using this.getReference() in the controller

References are usually passed to event handlers

Here's an example with one button. Clicking on the button will disable it. As you can see, the handler uses the component reference pass in via data.component.

Using getReference()

But what if we need to get a reference to another component in the view? In that case you tag the component you need with a reference config, then use getReference() in the controller.

Getting a reference when debugging

There are other ways of getting references, but these are either non-standard or for debugging. For example, components have an up() method, and containers have a down() method. These look up or down the containment hierarchy to find the specified component. Using these methods is poor technique becuse it violates principles of encapsulation and limiting scope.

There are also debugging methods, such as Neo.findFirst() which will find any component matching the search param.

When you're debugging it's pretty handy to be able to inspect or interact with any component in the app. But app logic should never use Neo.findFirst() and very rarely use up() or down().

The following example gets a reference to the Learn button at the top of this site, and changes its text. Again — that use of Neo.findFirst() might be handy when debugging, but it should never be used in app logic.