Computer Information: What is Knockout

What is Knockout ?

Knockout is a JavaScript Library
Which helps the creation of rich, desktop-like web UIs
It simplifies user interactions and makes interfaces fully responsive to any data source changes
Knockout provides a simple two-way binding mechanism to link a data model to an UI,
Thus making synchronization between them a breeze

What are the Key Concepts of Knockout ?

1. Declarative Bindings

These allow you to connect parts of your UI to your data model in a simple and convenient way
With declarative bindings even if you change the DOM all bound pieces stay connected
You can bind data to a DOM by simply including a data-bind attribute to any DOM element

2. Automatic UI Refresh

3. Dependency Tracking

Every time when your model data has changed all parts associated with it automatically being updated
No need to worry about adding event handlers and listeners
All that extra work is performed internally by Knockout and observables,
Which notify listeners when underlying values have changed

4. Templating

when your application becomes more complex and you need a way to display a rich structure of view model data,thus keeping your code simple
Knockout has a native, built-in template engine which you can use right away
But if you want, a third-party template engine, like jquery.tmpl or Underscore, also can be used

More Features of Knockout

How to Download Knockout ?

You can Download knockout Here

Step 1

Step 2

Step 3

How to work with Knockout ?

1. You have to add a reference to the "knockout-2.2.0.js" File which you downloaded

2. Then You have to add Reference to above file inside your master file

i.e. Inside ViewsShared\_Layout.cshtml

Thats it.Your done.

Lets try with some basic capabilities of Knockout

- ASP.Net MVC 3 and Visual Studio 2010 has been used

CASE 1 : How to use bindings in the View (Static Data) ?

For that you can use data-bind attributes

Views Code

<p>First name: <strong data-bind="text: firstName"></strong></p>

Javascript Code

//This is a simple Viewmodel

//JavaScript that defines the data and behavior of your UI

functionAppViewModel() {

this.firstName = "Sampath";

this.lastName = "Lokuge";

}

//Activates knockout.js

ko.applyBindings(newAppViewModel());

</script>

Output

CASE 2 : How to Make the data Editable (Dynamic Data) ?

Thats why Knockout has a concept of observables
These are properties that automatically will issue notifications whenever their value changes

i.e.

Not only that the underlying ViewModel data is being updated when you edit ,
But that all associated UI is updating in Sync with it too

Views Code

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name:<input data-bind="value: firstName" /></p>

Javascript Code

//This is a simple Viewmodel

//JavaScript that defines the data and behavior of your UI

functionAppViewModel() {

this.firstName = ko.observable();

this.lastName = ko.observable();

}

//Activates knockout.js

ko.applyBindings(newAppViewModel());

</script>

Output

How to Make the data Editable (Dynamic Data)

CASE 3 : How to Define Computed Values ?

To handle this, Knockout has a concept of Computed Properties
These are observable (i.e., they notify on change)
And they are computed based on the values of other observables

Views Code

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name:<input data-bind="value: firstName" /></p>

Javascript Code

Note : In order to simplify things you can create a variable self (i.e. var self = this; )

//This is a simple Viewmodel

//JavaScript that defines the data and behavior of your UI

functionAppViewModel() {

varself = this;

self.firstName = ko.observable();

self.lastName = ko.observable();

self.fullName = ko.computed(function () {

returnself.firstName() + " " + self.lastName();

});

}

//Activates knockout.js

ko.applyBindings(newAppViewModel());

</script>

Output

CASE 4 : How to add UPPER-CASE behavior ?

Need to add a capitalizeLastName function to the viewmodel
To Read or Write an observables value, you have to call it as a function

Views Code

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name:<input data-bind="value: firstName" /></p>

Javascript Code

<script type="text/javascript">

//This is a simple Viewmodel
//JavaScript that defines the data and behavior of your UI
functionAppViewModel() {
  varself = this;
self.firstName = ko.observable();
self.lastName = ko.observable();

self.fullName = ko.computed(function () {
returnself.firstName() + " " + self.lastName();
});

self.capitalizeLastName = function () {
  varcurrentVal = self.lastName();//Read the current value
  self.lastName(currentVal.toUpperCase());//Write back a modified value
};
}

//Activates knockout.js

ko.applyBindings(newAppViewModel());

</script>

Output

Small discussion about Knockout on stackoverflow, Which I have involved

Difference between knockout and .NET View Models ?

What has Said Creator of Knockout about This Article ?

Conclusion

This is a very basic example, but it illustrates some of the key points of Knockout
Youve got a clean, object-oriented representation of your UIs data and behaviors (your viewmodel)
Separately, youve got a declarative representation of how it should be displayed visibly (your view)
You can implement arbitrarily sophisticated behaviors just by updating the viewmodel object
You dont have to worry about which DOM elements need to be changed,added or removed ,
The framework can take care of synchronizing things for you

I hope this helps to You.Comments and feedback greatly appreciated.

If you feel it was a good article,Give me a +1.Thank You.

How to Work with Lists and Collections of Knockout ?

Computer Information

Thursday, July 10, 2014

What is Knockout

You Might Also Like

Related Posts by Categories

0 comments:

Archive