Lightning Attributes unbound vs bound bindings expressions

Introduction:-

In this blog, I am going to explain how to use salesforce attribute unbound vs bound binding. Attributes are key parts of a web component-based framework like lighting, Polymer and react etc which are used to communicate or exchange data between components. You can think it like a member variable in Java. Here is the example of attributes

<aura: attribute name="whom" type="String" default="world" required="true"/>

Now if you see the below components having an attribute name message which is referred in the component by using {!v.message} with {!} expression know as the bounded expression. Salesforce supports two types of expression bounded and unbounded to pass the attribute values.

<aura:component >
<aura:attribute type="String" name="message" default="Welcome to salesforce" description="Simple Message " />
<aura:attribute type="Account" name="acc" default="{'sObjectType':'Account', 'Name':'SFDC'}" description="Account attribues "/>
<aura:attribute type="List" name="types" default="['Salesforce', 'force.com', 'Lightning']" description="Collection type" />
<div>
{!v.message}
</div>
<div>
{!v.acc.Name}
</div>

<div>
{!v.types[0]}
</div>
</aura:component>

Expression Binding: –

Salesforce supports two type of binding expression in Salesforce namely bounded and Unbounded.  The two forms exhibit different behaviors for data binding and updates when you pass an expression from a parent component to a child component that it contains.

{! Expression} (Bound Expressions)

Data updates in either component are reflected through bi-directional data binding in both components. Similarly, change notifications are triggered in both the parent and child components. Means if you update any attributes in parent components those changes will be updated to child component attributes.

{#Expression} (Unbound Expressions)

Data updates behave, as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.Objects, such as Array or Map, are passed by reference so changes to the data in the child propagate to the parent. However, change handlers in the parent won’t be notified so it will not be re-rendered. The same behavior applies for changes in the parent propagating to the child.

Bi-directional data binding is expensive for performance and it creates hard-to-debug errors due to the propagation of data changes. So its recommend using the {#expression} syntax instead when you pass an expression from a parent component to a child component unless you require bi-directional data binding.

Here is the simple Component ChildExp1.cmp with bounded expression

<aura:component >
    <!-- Primitive type Attributes  and are passed by value, and data updates for the expression in the parent and child are decoupled. -->
    <!-- Objects, such as Array or Map, are passed by reference -->
    
    <h6> <b>Inner Component</b></h6> <br/>
    <aura:attribute name="welcomemessage" type="String" default="Welcome to Child Component"/>
    <aura:attribute name="acc" type="Account" default="{'sObjectType':'Account' , 'Name':'Child Account '} "/>
    <aura:attribute name="booleanValue" type="Boolean"/>
    <aura:attribute name="numberValue" type="Double"/>
    <aura:attribute name="stringValue" type="String"/>
    <aura:attribute name="listValue" type="List" default="['red', 'green', 'blue']"/>
    <aura:attribute name="mapValue" type="Map" default="{ a: 'label1', b: 'label2' }"/>
    <div>
      <b>  Child Component Welcome Message : {!v.welcomemessage}</b>
    </div>
    <div>
       <b> Child Component Account Name : {!v.acc.Name}</b>
    </div>
    <div>{!v.booleanValue}</div>
    <div >{!v.numberValue}</div>
    <div >{!v.stringValue}</div>
    <div >
        <aura:iteration aura:id="box" items="{!v.listValue}" var="message" indexVar="index">
            {!index}:{!message}<br/>
        </aura:iteration>
    </div>
    <br/>
    <div >{!v.mapValue}</div>
    <p><ui:button label="Update Child Component " press="{!c.updateMessage}"/></p>
    
    
    
</aura:component>

 

({
    updateMessage : function(component, event, helper) {
        component.set("v.welcomemessage", "updated :: Child message");
        component.set("v.acc",{'sobjectType':'Account',
                               'Name': 'Updated: Child Account'
                              });
        component.set("v.booleanValue", "false");
        component.set("v.numberValue", "120.90");
        component.set("v.stringValue", "updated by Child stringValue message");
        component.set("v.listValue", "['First', 'Second', 'Third']");
     },
    
    
})

Here is the parent Component which is passing referring the child component to and pass the attributes by using Bound expression

<aura:component >
   
   <b> Parent Compoent :</b>
     
    <aura:attribute name="parentAttr" type="String" default="Welcome to Parent Message"/>
    <aura:attribute name="accParnet" type="Account" default="{'sObjectType':'Account' , 'Name':'Parent Account '} "/>
    <aura:attribute name="booleanValue" type="Boolean"/>
    <aura:attribute name="numberValue" type="Double"/>
    <aura:attribute name="stringValue" type="String"/>
    <aura:attribute name="listValue" type="List" default="['red', 'green', 'blue']"/>
    <aura:attribute name="mapValue" type="Map" default="{ a: 'label1', b: 'label2' }"/>
    
    
    <p>Parent Component Primitive type: {!v.parentAttr}</p>
    <p>Parent Component Non Primitive Types : {!v.accParnet.Name}</p>
   
    <div >{!v.booleanValue}</div>
    <div >{!v.numberValue}</div>
    <div>{!v.stringValue}</div>
    <div>{!v.mapValue}</div>
    <div>
        <aura:iteration aura:id="box" items="{!v.listValue}" var="message" indexVar="index">
            {!index}:{!message}<br />
        </aura:iteration>
    </div>
    <br/>
    
    <div>
        
        <c:ChildExpr1 aura:id="innerCmp" stringValue="{!v.stringValue}" 
                      booleanValue="{!v.booleanValue}" numberValue="{!v.numberValue}" listValue="{!v.listValue}" 
                      mapValue="{!v.mapValue}" welcomemessage="{!v.parentAttr}" acc="{!v.accParnet}"/>
        
        
    </div>
      <p><ui:button label="Update Message - Parent"
                  press="{!c.updateParentMessage}"/></p>
  
    
</aura:component>

 

({
    updateParentMessage: function(cmp) {
        cmp.set("v.parentAttr", "updated parent attribute");
        cmp.set("v.accParnet",{'sobjectType':'Account',
                               'Name': 'Updated: Parent Account'
                              });
        cmp.set("v.booleanValue",false);
        cmp.set("v.numberValue","8335");
        cmp.set("v.stringValue","CHANGED string value");
    },
    
    
})

If you click on Update Message – Parent  Button those changes will be now propagated to the child component and vice versa which is similar to two-way data binding. 

 

Now Replace the child component invocation in the Parent Component with the below code by using Unbound Expression Now the parent component changes will not propagate to the child component which acts like as unidirectional binding. 

   
        <c:ChildExpr1 aura:id="innerCmp" stringValue="{#v.stringValue}" 
                      booleanValue="{#v.booleanValue}" numberValue="{#v.numberValue}" listValue="{#v.listValue}" 
                      mapValue="{#v.mapValue}" welcomemessage="{#v.parentAttr}" acc="{#v.accParnet}"/>

Now When you click Update Child Component data its will update only child component attributes and when you click on the Update Message -Parent parent component its update the parent component data which is unidirectional data binding. Now let see how handler works with unbound and bound expression.When you use a bound expression, a change in the attribute in the parent or child component triggers the change handler in both components. When you use an unbound expression, the change is not propagated between components so the change handler is only triggered in the component that contains the changed attribute.

Now update childExpr1.cmp with below code

<aura:component >
    <aura:attribute name="childAttr" type="String" />
    <aura:handler name="change" value="{!v.childAttr}" action="{!c.onChildAttrChange}"/>  
    <p>childExpr childAttr: {!v.childAttr}</p>
    <p><lightning:button label="Update childAttr"
                         onclick="{!c.updateChildAttr}"/></p>
</aura:component>

Here is the controller

({
    updateChildAttr: function(cmp) {
        cmp.set("v.childAttr", "updated child attribute");
    },
    onChildAttrChange: function(cmp, evt) {
        console.log("childAttr has changed");
        console.log("old value: " + evt.getParam("oldValue"));
        console.log("current value: " + evt.getParam("value"));
    }
})

Here is the ParentExpr1.cmp

<aura:component >
    <aura:attribute name="parentAttr" type="String" default="parent attribute"/>
    <aura:handler name="change" value="{!v.parentAttr}" action="{!c.onParentAttrChange}"/>
    <c:childExpr1 childAttr="{!v.parentAttr}" />
    <p>parentExpr parentAttr: {!v.parentAttr}</p>
    <p><lightning:button label="Update parentAttr"
                         onclick="{!c.updateParentAttr}"/></p>
</aura:component>
({
    updateParentAttr: function(cmp) {
        cmp.set("v.parentAttr", "updated parent attribute");
    },
    onParentAttrChange: function(cmp, evt) {
        console.log("parentAttr has changed");
        console.log("old value: " + evt.getParam("oldValue"));
        console.log("current value: " + evt.getParam("value"));
    }
})

Press the Update parentAttr button. The change handlers for c:parentExpr1 and c:childExpr1 are both triggered as we’re using a bound expression.

Now Change c:parentExpr1 to use an unbound expression instead as like this. <c:childExpr1 childAttr=”{#v.parentAttr}” />  which use an unbound expression, the change is not propagated between childExp1.cmp and parentExpr1.cmp .</c: