There are use cases, such as the expense tracker app in the Lightning Components Developer's Guide, where users are entering data into a dynamic list that grows with each user input submission. My question is, in these situations, what is the most efficient way to implement a UI element that allows the user to remove an item from the list?
Answering my own question. The Lightning Components Developer's Guide has the following:
The Aura object is the top-level object in the JavaScript framework code. For all the methods available in the Aura class, see the JavaScript API at https:/[mySalesforceInstance].lightning.force.com/auradocs/reference.app, where [mySalesforceInstance] is the name of the instance hosting your org; for example, na1.
So you can go to https://na15.lightning.force.com/auradocs/reference.app for example and see something like the following:
In Winter '15, it seems that all fields that will be data-bound need to be explicitly initialized in the default attribute. In situations where I don't want to go through the hassle of explicitly defining every single field, I've adopted a pattern of using an Apex controller method to return a new instance of the desired object that has default values filled in.
@AuraEnabled
public static Contact newContact() {
return (Contact)Contact.sObjectType.newSObject(null, true);
}
With this method defined, I use an init handler to invoke the Apex controller method, and then store the result in the desired variable. Below is a helper function definition that I call from the init handler.
initThisContact : function(component) {
var self = this; // safe reference
// Create an action to invoke the Apex controller method
// which will return a new Contact record
var initAction = component.get("c.newContact");
initAction.setCallback(self, function(a) {
component.set("v.thisContact", a.getReturnValue());
});
// Enqueue the action
$A.enqueueAction(initAction);
}
This approach is not as efficient as being able to simply initialize a new object via the default attribute, since it requires a round-trip Ajax request to Salesforce. I hope in the future there will be a more efficient way to initialize sObject attributes in Lightning.
Best Answer
Luckily the aura:iteration component has a super convenient, built-in attribute called indexVar. By leveraging indexVar I am able to pass the array index to the controller action, which can then use
Array.prototype.splice()to remove an element from the list.For example, consider the following aura:iteration element:
I've intentionally included a ui:button and a standard HTML a (anchor) to show how to get the index value in both cases. The controller actions are shown below.
And
helper.removeLead()is defined as follows: