Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reduced test case for locker service dynamic component DOM access.
<aura:component implements="forceCommunity:availableForAllPageTypes" access="GLOBAL">
<!-- public attributes -->
<aura:attribute name="childCmp" type="Aura.Component" access="PUBLIC"/>
<!-- component event handlers -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- markup -->
<div aura:id="view">
<lightning:button onclick="{!c.handleMarkupButtonClicked}" label="Use Component from Markup"/>
<lightning:button onclick="{!c.handleDynamicButtonClicked}" label="Use Dynamic Component"/>
<c:LSTestChild aura:id="child"/>
</div>
</aura:component>
({
doInit: function (component, event, helper) {
$A.createComponent(
'c:LSTestChild', {
'aura:id': 'dynamicChild'
},
function (newCmp) {
//Add the new component to the body
if(component.isValid()) {
component.set('v.childCmp', newCmp);
}
}
);
},
handleMarkupButtonClicked: function (component, event, helper) {
// Using 'find' to get the item from markup
component.find('child').stuff();
},
handleDynamicButtonClicked: function (component, event, helper) {
// Using our attribute to get the component
component.get('v.childCmp').stuff();
}
})
<aura:component access="PUBLIC">
<!-- public methods -->
<aura:method name="stuff" action="{!c.doStuff}" access="PUBLIC"/>
<!-- markup -->
<div aura:id="findMe"></div>
</aura:component>
({
doStuff: function (component, event, helper) {
var viewCmp = component.find('findMe');
if(typeof viewCmp.getElement !== 'function') {
alert('getElement() not available!');
} else {
alert('getElement() was found on the view!');
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.