A client-side controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas (as you would with any JavaScript map).
({ myAction : function(cmp, event, helper) { // add code for the action }, anotherAction : function(cmp, event, helper) { // add code for the action } })
Each action function takes in three parameters:
A client-side controller is part of the component bundle. It is auto-wired via the naming convention, componentNameController.js.
To create a client-side controller using the Developer Console, click CONTROLLER in the sidebar of the component.
The following example component creates two buttons to contrast an HTML button with <lightning:button>, which is a standard Lightning component. Clicking on these buttons updates the text component attribute with the specified values. target.get("v.label") refers to the label attribute value on the button.
Component source
<aura:component> <aura:attribute name="text" type="String" default="Just a string. Waiting for change."/> <input type="button" value="Flawed HTML Button" onclick="alert('this will not work')"/> <br/> <lightning:button label="Framework Button" onclick="{!c.handleClick}"/> <br/> {!v.text} </aura:component>
If you know some JavaScript, you might be tempted to write something like the first "Flawed" button because you know that HTML tags are first-class citizens in the framework. However, the "Flawed" button won't work because arbitrary JavaScript, such as the alert() call, in the component is ignored.
The framework has its own event system. DOM events are mapped to Lightning events, since HTML tags are mapped to Lightning components.
Any browser DOM element event starting with on, such as onclick or onkeypress, can be wired to a controller action. You can only wire browser events to controller actions.
The "Framework" button wires the onclick attribute in the <lightning:button> component to the handleClick action in the controller.
Client-side controller source
({ handleClick : function(cmp, event) { var attributeValue = cmp.get("v.text"); console.log("current text: " + attributeValue); var target = event.getSource(); cmp.set("v.text", target.get("v.label")); } })
The handleClick action uses event.getSource() to get the source component that fired this component event. In this case, the source component is the <lightning:button> in the markup.
The code then sets the value of the text component attribute to the value of the button’s label attribute. The text component attribute is defined in the <aura:attribute> tag in the markup.
Handle framework events using actions in client-side component controllers. Framework events for common mouse and keyboard interactions are available with out-of-the-box components.
In the handleClick function, notice that the first argument to every action is the component to which the controller belongs. One of the most common things you'll want to do with this component is look at and change its attribute values.
cmp.get("v.attributeName") returns the value of the attributeName attribute.
cmp.set("v.attributeName", "attribute value") sets the value of the attributeName attribute.