In this blog, we will see 2 different ways of binding variables in lightning components.

If we remembered, in the earlier blogs we passed the attributes between the components using the {!} notation. But now in Spring 17, Salesforce introduced a new {#} notation.

What is this new {#} notation?? but before jumping on the new notation we will try to understand what is existing {!} notation.

What is {!} notation?

Its a bi-directional data-bind expression which means if we passed the attribute value from outer to inner component, and any modification performed at inner component level, will automatically changes the value of outer component.

What is {#} notation?

Its a one side data-bind expression knows as Unbound expression (introduced in spring 17) which means the behavior is opposite to {!} notation. The value modified in inner component will not reflect the main outer component.

Why this {#} notation got introduced?

If we see the {!} notation which is bi-directional data binding where the lightning framework needs to monitor the attribute value changes across multiple nested components which in-turn affects the performance. As in most of the scenarios we don’t need to maintain the attribute value changes across the components.

Lets jump into the example:

You can view the output in action here:

Step 1: Creating the Inner Component:

<aura:component >
<aura:attribute name="twoWayBind" type="String" />
<aura:attribute name="oneWayBind" type="String" />
<aura:handler name="init" action="{!c.doInit}"  value="{!this}" />
<b>Inner Component Values</b>


Two Way Binding: {!v.twoWayBind} in Inner Component


One Way Binding: {!v.oneWayBind} in Inner Component
</aura:component>

Note: we have a doInit method which basically sets the values to both the attributes. For testing purpose, you can test both the components individually which displays different values.

Step 2: Inner Component Handler:

doInit : function(component, event, helper) {
component.set("v.twoWayBind", "Degrades the performance");
component.set("v.oneWayBind", "One Way increases the performance");
}

Step 3: Creating the Outer Component and embedding the inner component into it:


<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute name="twoWayBind" type="String" default="Two Way Bind"/>
<aura:attribute name="oneWayBind" type="String" default="One Way Bind"/>
<div style="border: solid;">
<b>Outer Component Values</b>


Two Way Binding: {!v.twoWayBind} in Outer Component


One Way Binding: {!v.oneWayBind} in Outer Component
</div>
<div style="border: solid;">
<c:InnerComponent twoWayBind="{!v.twoWayBind}" oneWayBind="{#v.oneWayBind}" />
</div>
</aura:component>

Note:

  1. Observe the notation used for passing attribute values to inner component
  2. We have default values set for the both TwoWayBind and OneWayBind Variables, so that when we load the first time without the InnerComponent in it, this will display the default values.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s