Getting started with knockout.js

Recently, I learnt something very new e.g. Knockout.js. It is quite a advanced form of javascript. It just simplifies the structure of the javascipt in your application. It basically follows MVVM pattern(Model View View Model). It is quite fast and easy to use as comparison to jquery.

Some of it’s key features are :-

1. Declarative bindings
2. Automatic UI refresh
3. Free, open source (MIT license)
4. Pure JavaScript — works with any web framework
5. Supports all mainstream browsers
6. Templating(Quickly generate sophisticated, nested UIs as a function of your model data)

I’ll be covering the very basics of it in this article. In this, you need to deal with KO’s (Knockout objects). These are used to bind data with your model objects.

For using it add knockout-x.y.z.js in your application. Now, Moving towards how to use it :-
For example, Declaring model as below :-
E.g
[java]
var firstModel = {
empName: ‘Gaurav’,
empWeight: 72
};
[/java]

Then we need to create view for this e.g.
[java] Weight of emp <span data-bind="text: empName"> is <span data-bind="text: empWeight"> kgs.[/java]

Here KO wil bind the model object to these data-bind attribute and you will get the required details. But, this will not display the data as such, You need to activate the KO’s for binding the data.
e.g
[java]
<script>
ko.applyBindings(firstModel);
</script>
[/java]

After this you will be having the desired results.e.g Weight of emp Gaurav is 72 kgs.

So, You can see the declarative data binding of knockout.js. It is having lot more features. I’ll come up with all those.
Just give it a try. 🙂

Thanks & Regards,
Robin Sharma,
Intelligrape.
@er.robinsharma