4

Here is the code for the after render

({
    afterRender: function (component, helper) {
        this.superAfterRender();

        var allElements = document.getElementsByClassName("myBtn");
        for (i = 0; i < allElements.length; i++) { 
            allElements[i].addEventListener("touchstart", function(e) {
                var currentPin = component.get("v.enteredPin");

                var addedNumber = event.target.data;
                var newPin;
                if(addedNumber == '<') {
                    if(currentPin.length == 0) {
                        newPin = currentPin;
                    } else {
                        newPin = currentPin.substring(0, currentPin.length - 1);
                    }
                } else {
                    var newPin = currentPin + addedNumber;      
                }
                var obscured = "";
                obscured = Array(newPin.length + 1).join("*");
                component.set("v.obscuredPin", obscured);   
                component.set("v.enteredPin", newPin);
            })
        }

        var targetEl = component.find("pinScreen").getElement();
        targetEl.addEventListener("touchmove", function(e) {
            e.stopPropagation();
        }, false); 

    },
})

Here is the part of the component:

                <!-- Number Grid -->
                <div class="slds-grid slds-wrap slds-grid--pull-padded--align-center">

                    <aura:iteration items="1,2,3,4,5,6,7,8,9" var="number">
                        <div class="slds-col--padded slds-medium-size--1-of-3">
                            <button class="slds-button slds-button--neutral myBtn"
                                    onclick="{!c.pinButtonPressed}"
                                    data-num="{!number}">{!number}</button>
                        </div>
                    </aura:iteration>
                    <div class="slds-col--padded slds-medium-size--1-of-3"/>
                    <div class="slds-col--padded slds-medium-size--1-of-3">
                        <button class="slds-button slds-button--neutral myBtn"
                                    onclick="{!c.pinButtonPressed}"
                                    data-num="0">0</button>
                    </div>
                    <div class="slds-col--padded slds-medium-size--1-of-3">
                        <button class="slds-button slds-button--neutral myBtn"
                                    onclick="{!c.pinButtonPressed}"
                                    data-num="&lt;" >&lt;</button>
                    </div>
                </div>
1
  • Hi @RonaldDags Welcome to SFSE. Can you please post your component code as well? And hope the class name "myBtn" is linked with HTML <button> and not ui:button?
    – SE_User
    Feb 23 '17 at 6:19
5

I just tried your example and the problem I see is that the variable i has not been declared and part of the locker requirements is that javascript be ES5 Strict Mode compliant which requires all variables be declared.

I get this excellent error message when I run the sample:

enter image description here

Are you not seeing that same error message?

After fixing that issue I hit another javascript exception because there is no component with aura:id="pinScreen" but I believe that is because I only have part of your markup.

Also your callback passed to touchstart declares its arg name as e and then your code tries to use:

var addedNumber = event.target.data;

This implicit event variable (its really window.event https://developer.mozilla.org/en-US/docs/Web/API/Window/event) is not present when locker is enabled as it is not part of any standard, is not on any standards track, and its use is strongly discouraged so we did not expose it.

You'll also need to look into $A.getCallback() which is required by Lightning (nothing to do with locker) when you wire up external event handlers directly like this otherwise if you use many parts of the Lightning API you will run into issues because the Lightning context has not be re-established.

I believe what you were going for with event.target.data should be:

var addedNumber = event.target.dataset.num;

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes which works perfectly.

NOTE: a number of the issues identified above would happen with or without locker activated.

2
  • Hi Doug Thanks for looking at it, I made changes to the code as you suggested like declaring the variable and changing the addedNumber to ar addedNumber = event.target.dataset.num, however, for the window.event (function(e)) is there a way around this ? Feb 24 '17 at 4:08
  • Hi Doug, I think I was able to do it by this: allElements[i].addEventListener("touchstart", function(event) { var addedNumber = event.target.dataset.num;. Thanks Feb 24 '17 at 6:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.