Let's implement the one way data binding for our applications.
Well, to keep that in mind, we have a person, name and age and we want to implement the one way data
binding.
So let me just scroll down.
We want to show the actual values.
So the data, let's say, Yannick and age 30 inside of the correct boxes for sure, right.
If the text boxes.
So I will just scroll down.
Here is our text box.
And when I start the application, I want to see Yannick and 30 already prefilled.
Why is that something that you want to implement?
Well, keep in mind that in real world applications, for example, it could be that you want to say,
Hey, I want to load the information from a web server and therefore you will get a response that could
be like Yannick and 30.
And then you want to pre-fill these informations here before you show it to the user, for example,
or not before, but in the moment you start the application or whatsoever.
But that could be a realistic scenario.
So as I said, you would use one way data binding or that kind of data binding where you want to load
information from somewhere else and then display to the user.
Not always you want to create new stuff.
If you create new stuff, for sure it will be empty.
I want to write down Yannick and 30, but sometimes if you edit data or load data which is pre-existing
somewhere else, maybe in a text file or maybe in a Json format on a web server, you load that data,
then you want to display it.
So let's see how we can use one way data binding to get started and achieve that.
We can see Yannick and age 30.
We know that we want to show instead of this text box right here, this is the first one that should
show.
Yannick So the name of the person, right?
And here in the second text box, we want to display the actual age of that person.
So the properties that we want to adjust in both cases are the text.
We want to adjust the text property, right?
So we will bind the value of the text property to be dynamic.
Add curly braces, write down binding.
We want to bind it.
Let's write down the name of the property which is name right.
And finally add a comma, set the mode and set the value of the mode to one way.
So we now bind the actual value, which would be Yannick of the property name in a one way binding mode.
Great.
So let's just copy that over to our second text box and let's do exactly the same for the age.
Now if you hover above that, you can see that it's not really pointing to the property itself rather
than a path where the value will get grabbed from or fetched from dynamically, you will be able to
see that the values will now get set inside of the text boxes.
So there we go.
Here is our application.
You can see Yannick and 30 and we're good to go.
All righty.
So that already worked.
Now let me show you why two way data binding is very important because now let's assume that we want
to, well, adjust the values when we got them in the UI so we can see Yannick in the text box.
And I want to write another name, let's say Peter or whatever, and then we want to see the actual
new values.
So inside of our button click right here.
We could simply say, Let's create a message or like a person data or whatever, just like a message
that we want to show the person dot name plus and then is and then person dot age plus years old.
We could also use some other kind of formatting, but it's not important.
We just want to print out the string.
So Yannick is 30 years old, for example.
We want to put that inside here now.
Please pay attention.
We are not grabbing the data from our UI elements.
We are picking the data that we want to display to the user from our person object right here.
So many people assume that in one way, data binding, even though, well, the actual name is already
suggesting it or giving you the correct information in one way data binding, we can only get the data
in one way.
So we get that data from our application and we show it to the user inside of those elements.
That's one way data binding here, right?
So if I just write down Peter here.
And set the age to 20.
It will not get updated because it's just in one way if we want to do it in both ways.
So that I just in that way here change the values and they will get updated here.
In the instance of the object, we need to make use of two way data binding.
So in that way right now with one way data binding implemented, if I click on info, it will not be
the value that you can see right here.
It's still Yannick is 30 because the values that you can see right here never got updated.
Right?
We are using person, age and name, but so far we did not modify the actual values because of one way
data binding instead of two way data binding.
So this is our next step.
We will now see how we can implement two way data binding so that we can use UI elements to modify the
data in the application.
And then finally, you have two way data binding showing the data from your application, modifying
the data from within your UI elements inside of the application.
All right, See you in the next lesson.