I'd like to introduce you guys to some,
it's an online coding, actually, framework sort of thing.
This is JSFiddle.net.
Your Knockout documentation actually encourages using JSFiddle and
just play with all the Knockout functionality, right?
Just to get used to it.
So you don't have to start coding your project right away using Knockout when
you are not too familiar with it.
So I understand that you need to get comfortable with the framework before
you go ahead.
One of a very basic example that was given in the Knockout framework,
I just personalized it and saw how I could play around with it.
So let me show you, so the first block that is right here on my left hand side,
is the view, which is your HTML elements.
As you can see I have a div that has two paragraphs and a header element.
And then I have my JS code,
JavaScript code right below that that defines a view model.
And I have a CSS which is on the right hand side of my screen.
That is just giving a set of formatting styles for my page.
And whatever you see on the right bottom
is the result that you get out of coding all of this.
So as you can see i have declared a paragraph element that has a first name.
And another paragraph element that has the time of the day.
And what I've done is, I've just added a text box input.
So I did input data bind.
Data bind is the variable that performs data binding
with your JavaScript, with your view model.
Whenever you want to access this property, you can access using.
>> So basically binding these up again.
>> These bindings, exactly.
You are actually giving my first name an id called first name.
So here as you can see I've given value colon first name.
So this can be taught as an id for this.
And now if you go and see my view model, my view model is just a class.
And I'm passing my first name and time of the day into that.
And what I do is I create properties inside my view model so
which is called this.FirstName.
Which is accessing the firstName from the paragraph element.
And it says equals = KO.observable of first.
So whatever I pass into the first variable goes into my
this.firstName which automatically gets updated in the paragraph element.
And there is another one,
which is this.time which actually binds it to time of the day.
And it says, track observe the time of the day input and
assign the value that is passed inside this class.
And here,
the next line is very interesting because it's called ko.computed.
So computed is another property that is very similar to the observables, but
what it does is it essentially computes the values of other observables.
And it gives you a result.
So as you can see, you have two observables: time and the first name.
What I am doing in greeting is, I am adding the time and
a comma and the first name and then giving this to the greeting element.
So this dom element, as you can see, is a header too.
And it has the word good in it already.
And then you have a span element, that has the greeting that goes inside,
followed by an exclamation.
And once I finish coding the ViewModel class,
there is a line of code that says, ko.applyBindings of new ViewModel.
So applyBindings is very important because
this is the line that actually makes Knockout work.
So if you do not have this line, your application might not run.
A lot of times students actually miss this part.
So ensure that you do have the the applied bindings,
which is essentially creating an instance of your ViewModel class.
And it's passing in information.
Here I’m just passing Poonima and Morning to it.
So when I run this, what you can see is, it's as good morning Poonima.
So it gives me a whole new message right here.
So here as you can see I'm going to change the first name to Gauril and,
see it's evening here.
And then it changes the message from your view,
which is whatever the user sees.
So that actually changes depending on that.
I can probably give another one here as well and try out.
I'm going to say Good Night, Gauril.
And probably run this application again, it's going to give Good Night Gauril.
So as you can see, you can update the data from the JavaScript
as well as the user point of view and this is going to change.
This is one of Knockout's very important functionality.
So as you can see, you can actually create any observable
data and then you can updated on your user view.