LockerService - New properties added to an object in JavaScript are not visible
Last updated 2021-05-26 ·Reference W-3221032 ·Reported By 19 users
Summary
When LockerService is activated new properties added to an object in JavaScript are not visible.
Repro
1. Create the following Lightning component and Visualforce Page:
Visualforce Page
------------------------
<apex:page showHeader="true" sidebar="true">
<apex:includeScript value="{!URLFOR($Resource.jQuery, '')}"/>
<apex:includeLightning />
<div id="lightning">
</div>
<script>
j$ = jQuery.noConflict();
$Lightning.use("c:LightningSampleApp", function() {
$Lightning.createComponent("c:DataBindingButtonsCmp",
{},
"lightning"
);
});
</script>
</apex:page>
Component Name: DataBindingButtonsCmp
------------------------
<aura:component >
<aura:attribute name="testAcc" type="Account" access="global"/>
<aura:handler name="init" value="{!this}" action="{!c.initialize}"/>
<p>Name: <ui:inputText value="{!v.testAcc.Name}"/></p>
</aura:component>
Controller
------------------------
({
myAction : function(component, event, helper) {
},
initialize : function(component, event, helper) {
var acc = {};
component.set("v.testAcc", acc);
},
logAcc : function(component) {
console.log(component.get("v.testAcc.Name"));
}
})
2. Deactivate Lightning LockerService Security: Setup -> Critical Updates -> Deactivate
3. Navigate to the Visualforce page and fill in a value for the Name field
4. Click on the 'Console Log Acc' link and view the results in the console. You should see the data you entered in the Name field displayed in the console
5. Now activate Lightning LockerService Security: Setup -> Critical Updates -> Activate
6. Navigate to the Visualforce page and fill in a value for the Name field
7. Click on the 'Console Log Acc' link and view the results in the console. You should see that the data you entered in the Name field doesn't display
Workaround
As a workaround you can define the properties you want to add with empty values when the object is created.
A modification has been made to the controller to demonstrate how this works:
({
myAction : function(component, event, helper) {
},
initialize : function(component, event, helper) {
var acc = {Name: ""}; // This is an empty property we have defined for Name
component.set("v.testAcc", acc);
},
logAcc : function(component) {
console.log(component.get("v.testAcc.Name")); // This displays the property
}
})
Is it Fixed?
Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.
