In this Chapter we will learn Data Binding in LWC. So if you are looking for one article to clear all your concepts regarding data binding then you are at right place 🙂
Topics Covered:
- What is data binding
- What is One-Way data binding
- What is Two -Way data binding
- Framework using Two-Way data binding
- What is good and bad with Two-Way data binding
- Data binding in LWC VS Data binding in Aura
- Understanding Code Line by Line
- Track decorator not used anymore
Data Binding
Data binding is the synchronization of data between business logic and view of the application. There are two types of data-binding
- One-Way Data Binding
- Two-Way Data Binding
One Way Data Binding
- They merge template and model components together into a view.
- After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view.
- Any changes that the user makes to the view are not reflected in the model.
- The developer has to write code that constantly syncs the view with the model and the model with the view.
From a performance perspective, one-time is the highest performance because it happens once; therefore, it does not require any change detection mechanisms to detect changes to the underlying model or in the UI
One-time data binding is practical when the data never or very rarely changes. When data changes regularly or very frequently, one-time data binding becomes a hindrance to simple and efficient UI updates. To solve the problem of UI updates for regularly changing model data, two-way data binding is used.
Two-Way Data Binding
It is a bi-directional approach as it travels in both of the directions. From model to view or view to model. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
Few points to note here:
- Data always flow from model to view and view to model
- In case of any modification in the model, the same will sync up in view
- In case of any modification in view, the same will sync up in the model
Angular JS Two-Way Data Binding
Don’t worry we are not learning angularjs here. Just understanding some basics of two-way data binding to get more clarity.
If you are shifting from Angularjs to LWC then you must know about two-way data binding.
Though Angularjs is one-time binding by default, an ng-model directive is used to perform two-way data binding in angular.
<input ng-model=”firstname”>
We don’t have to write extra code to link the model part with view part by adding few snippets of code we can bind the data with the HTML control.
In the above image, we have connected the property title to the input element by using ngModel directive.
Now, if we change the <input> element in the view it updates the title property. similarly, if we change the title property inside the component file it also the updates the <input> element value.
One-Way Data Binding Vs Two-Way Data Binding
UI data changes can occur within two scopes:
1.Within a single component –
Eg- Typing into an input field: the updating of the input field occurs locally within a component; it does not affect other components directly so can use two way binding. Using two-way data binding strictly within a component is not problematic.
2. Between components –
Using two-way data binding between components results in components receiving data from multiple sources, and this can be problematic
Problems with Two-Way Data Binding
Using two-way binding as a message bus is bad, because it makes it hard to follow the messages through your system (a triggers b, b triggers c, d and e, e changes a again. Using two-way data binding between components can results in components transitioning into undesired states because of conflicting data being propagated from multiple sources.
Therefore, one-way data binding is preferred even though it will require a more complicated data flow and more coding on the part of the developer.
Data Binding in LWC
Now as we are clear with data binding concept. Let’s see how we do data binding in LWC
One – Way Data Binding
LWC is designed with a one-way data binding approach.
Case 1: Display greeting message to a user
Before understanding Data Binding let’s understand property and attributes
When we declare a value in Javascript file, we say it as property
in the below image greeting is the property
To access any JavaScript property in template, surround that property with curly braces.
{property} // in template with no spaces
When we use property HTML we call it as attribute
Simple Data Binding in Aura
For the same output, lets see how we used to do data binding in aura
In the component we use declare attribute, handler and then !v to access the data
In JS controller we used component.set to set the value and see it in the view
You can see the code has become much simpler with LWC
Two- Way Data Binding in LWC
Case 2: If we want based on user input automatically model gets updated then how will we do it in LWC?
We already know that LWC uses One-Way data binding by default.
One way binding means that the model is rendered in the view, but in this case we want to update the model if the view changes, then what we should do ?
and the answer is…..
Event Listener
we must fire an event and handle that event to update the code in your controller.
HTML File
We have defined the function handleChange(event){} in the lightning input
JavaScript File
we are handling onchange HTML event in the javascript with the function, Hence we have written (event) in brackets. Basically whenever action happens it dispatches an event.
Let’s understand code line by line
this.firstName = event.target.value
this : If property is inside the class then use this. It specifies the current context
this.firstName : The variable name which we have defined at the beginning, we are just recalling it in the function to assign its changed value.
event.target: targets element where change is fired
event.target.value : This means from the onchange event I want the targeted value from the <lightning-input value={name}> .
Meaning, Whatever is there in value take that.
If you want other parameters from the <lightning-input /> tag you can get that as well like for label the syntax will be event.target.name
If you see console, you can notice that the framework observes changes to a field’s value, rerenders the component, and displays the new value
Use of Track Decorator
Earlier track decorator was used to make property reactive but now all fields in a Lightning web component class are reactive. If a field’s value changes, and the field is used in a template, the component re-renders and displays the new value so no need to use @track
Two- Way Data Binding in Aura
For same output in aura, you can see we use value providers.Value providers are a way to access data. The value providers for a component are v (view) and c (controller).
Definitely in LWC data-binding has become much more simpler.
Reference
Two-Way Data Binding in Angular
