Locker-Service safe passing of data from <a> and <lightning:xyz> to controller

Question

In my lightning component I loop over records and display links to them:

1) Works, but is discouraged as it doesn't work in all places

<aura:iteration items="{!v.records}" var="record">
    <a href="{!'/' + stage.id}" />
</aura:iteration

2) Tried that but fails with:

Cannot mix expression and literal string in attribute value

<aura:iteration items="{!v.records}" var="record">
    <a onlick="sforce.one.navigateToSObject({!'/' + stage.id})" />
</aura:iteration

3) How to pass the recordId into myOwnNavigateToSObject()?

<aura:iteration items="{!v.records}" var="record">
    <a onlick="{!c.myOwnNavigateToSObject}" />
</aura:iteration

My preferred solution is to make 2) work as I see no use of an additional controller function that just delegates work to navigateToSObject().

Answer 1

Thanks to all the other "answers" I finally solved it myself. To make it work with:

• Summer '17 activated Locker-Service
• regular <a> links AND <lightning:button> base components

I use id= for <a> and value= for <lightning:button>:

<aura:iteration items="{!v.records}" var="record">
    <a id="{!record.Id}" onclick="{!c.navigateToSObject}" />
    <lightning:button value="{!record.Id}" onclick="{!c.navigateToSObject}" />
</aura:iteration>

The controller need to check if getSource is defined and use event.currentTarget instead of event.target in case it is not.

navigateToSObject: function(cmp, event, helper) {
    var recordId = (event.getSource != undefined) ? event.getSource().get("v.value") 
                                                  : event.currentTarget.id;
    var evt = $A.get("e.force:navigateToSObject");
    evt.setParams({
        "recordId": recordId,
        "slideDevName": "detail"
    });
    evt.fire(); 
}

Answer 2

Try this

<aura:iteration items="{!v.records}" var="record">
<a id="{!record.Id}" onclick="{!c.myOwnNavigateToSObject}" />
</aura:iteration

an then in the controller:

myOwnNavigateToSObject: function(component, event, helper){
    var idx = event.target.id;        
    var sObectEvent = $A.get("e.force:navigateToSObject");
    sObectEvent .setParams({
    "recordId": idx  ,
    "slideDevName": "detail"
    });
    sObectEvent.fire(); 
},

Answer 3

2) won't work not only due to mixing expressions and literals but primarily because any arbitrary Javascript placed in the component markup is ignored by the framework. As described here:

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.

You can pass the id somewhere in the link markup (id or data-* attributes) as described by Acabo.

A more "component-oriented" approach would be to create a separate component for the item and in that component's controller invoke navigateToSObject in the context of that single record. Something along the lines of:

<aura:iteration items="{!v.records}" var="record">
    <c:item record="{!record}"/>
</aura:iteration

And in the item component:

<aura:attribute name="record" type="SObject" />

<a onlick="{!c.navigate}" />

Now your custom navigate method operates in the context of a single record.