Detecting Data Changes

Automatically firing an event

You can configure a component to automatically invoke a client-side controller action when a value in one of the component's attributes changes. When the value changes, the valueChange.evt event is automatically fired. The valueChange.evt is an event with type="VALUE" that takes in two attributes, value and index.

Manually firing an event

In contrast, other component and application events are fired manually by event.fire() in client-side controllers.

For example, in the component, define a handler with name="change".

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>

A component can have multiple <aura:handler name="change"> tags to detect changes to different attributes.

In the controller, define the action for the handler.

1swfobject.registerObject("clippy.codeblock-1", "9");({
2    itemsChange: function(cmp, evt) {
3        var v = evt.getParam("value");
4        if (v === cmp.get("v.items")) {
5        //do something
6        }
7    }
8})

When a change occurs to a value that is represented by the change handler, the framework handles the firing of the event and rerendering of the component. For an example of detecting data changes, see the aura:iteration component.