Locker Service - something strange happens with attributes after calling component.set()

Question

I'm working on making my lightning components compliant with Locker Service, and I see something strange happens with javascript variables after calling component.set() on them.

A component is having an attribute:

<aura:component controller="CPQ_QOT02_ConfigurationLC" access="GLOBAL">
    ...
   <aura:attribute name="item" type="Object" access="GLOBAL"/>
    ...
</aura:component>

In the init method of controller I'm calling server to fetch item variable. Item is a complex JS object having several properties (maps and arrays). Response from server is ok, I'm handling it in helper in below lines:

line   code

126    if (response.status == "SUCCESS") {
127        var item = JSON.parse(response.data);
128        console.log(item);
129        component.set("v.item", item);
130        console.log(component.get("v.item"));
131        ...

There is a significant difference between console.log that is printed to console in line 128 (before calling set) and in line 130 after calling it.

Here are snapshots from the browser console:

Console.log from line 128:

Console.log from line 130 (after setter was called. Looks like all properties are not directly visible):

As a result - whatever I would do later with the "v.item" variable - it seems not being applied to that attribute. Before locker service, everything was working fine, but also the result of both console.log's were the same.

Am I doing something wrong, or this is some framework issue?

Answer 1

This is definitely supposed to be a "feature" of Locker Service... an object stored in the framework becomes a "SecureObject" instead. Presumably this is designed to enable data binding to the view. But it is not documented particularly well.

Some things I have found:

• Data binding to a JS object works slightly better if you declare the aura:attribute as a Map not an Object.
• When you first component.set the Map it should contain all the keys it will ever have, otherwise newly added properties may not bind properly.
• If you pass an object to another component and it tries to modify it and then bind to its own view, you may end up with trouble. Sometimes I find myself cloning objects passed from other components (i.e. using something as silly as JSON.parse(JSON.serialize(obj))).