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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    itemsChange: function(cmp, evt) {
19        var v = evt.getParam("value");
20        if (v === cmp.get("v.items")) {
21        //do something
22        }
23    }
24})

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 more information, see aura:valueChange.