Click here to Skip to main content
15,867,594 members
Articles / Programming Languages / Javascript

What is Knockout ?

Rate me:
Please Sign up or sign in to vote.
4.59/5 (7 votes)
21 Nov 2013CPOL3 min read 15.6K   11   5
This article explains how to use Knockout with ASP.net MVC

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.You can read Original Article about this on My Blog Here.

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
Declarative Bindings

2. Automatic UI Refresh

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
Dependency Tracking

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
Templating

More Features of Knockout

More Features of Knockout

How to Download Knockout ?

Step 1

Download Knockout

Step 2

Download Knockout

Step 3

Download Knockout

How to work with Knockout ?

  1. You have to add a reference to the "knockout-2.2.0.js" File which you downloadedadd a reference
  2. Then You have to add Reference to above file inside your master file

    i.e. Inside \Views\Shared\_Layout.cshtml

    <script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>

    That's it.Your done.

Let's 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

View's Code

?<!-- This is a View - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

Javascript Code

<script type="text/javascript">    //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

How to use bindings in the View

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

  • That's 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

View's Code

<!-- This is a View - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name:<input data-bind="value: firstName" /></p>
<p>Last name:<input data-bind="value: lastName" /></p>

Javascript Code

<script type="text/javascript">
    //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

View's Code

<!-- This is a View - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name:<input data-bind="value: firstName" /></p>
<p>Last name:<input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

Javascript Code

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

<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();
        });
    }
    //Activates knockout.js
    ko.applyBindings(newAppViewModel());
</script>

Output

How to Define Computed Values

CASE 4 : How to add UPPER-CASE behavior ?

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

View's Code

<!-- This is a View - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name:<input data-bind="value: firstName" /></p>
<p>Last name:<input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName"> Go CAPS </button>

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

How to add UPPER-CASE behavior

Small discussion about Knockout on stackoverflow, Which I have involved

Conclusion

  • This is a very basic example, but it illustrates some of the key points of Knockout
  • You've got a clean, object-oriented representation of your UI's data and behaviors (your viewmodel)
  • Separately, you've 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 don't 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 you. Comments and feedback greatly appreciated.

You Might Also Like

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Freelancer
Sri Lanka Sri Lanka
Sampath Lokuge holds a Bachelor of Science degree in the Mathematics and Computer Science at the University of Colombo, Sri Lanka.

He possesses over 8 years of experience in constructing web applications using Microsoft Technologies including ASP.net MVC, C#, SQL Server, Web API, Entity Framework and also other web technologies such as HTML5, CSS3,jQuery and AngularJS.

Sampath has earned Microsoft certifications such as MCP, MCAD, MCSD and MCTS and very recently he has completed MS (Microsoft Specialist) for MVC 4 and MCSD (Windows Store Apps Using HTML5).

Besides that, he is an active blogger, writing about web and mobile development issues and promoting best practices.He also actively participates in online communities such as Code Project and StackOverflow.He himself is handling three communities, which are ASP.net MVC 5 With C# on Linkedin,Entity Framework 6 on G+ and Hybrid Mobile App with WinJS on Facebook.

Now, I am a 100% Freelancer. Smile | :)

Tech Blogs


Sampath Lokuge Tech Universe

Communities which I'm Handling :


Entity Framework 6

ASP.net MVC 5 With C#

Hybrid Mobile App with WinJS

Comments and Discussions

 
GeneralGood Work (a few typos in the script though) Pin
Member 98028412-May-15 4:50
Member 98028412-May-15 4:50 
Questionknockoutjs on Nuget. Pin
DamithSL5-Jul-14 16:49
professionalDamithSL5-Jul-14 16:49 
AnswerRe: knockoutjs on Nuget. Pin
Sampath Lokuge5-Jul-14 18:04
Sampath Lokuge5-Jul-14 18:04 
Hi Damith,

Yes.You're right.That is the best way.Thanks for sharing with us. Smile | :)

My Latest Article : NDepend - Static Analysis Tool for .NET Managed Code

Nothing is Impossible for Willing Heart.

GeneralMy vote of 5 Pin
Humayun Kabir Mamun20-Nov-13 23:13
Humayun Kabir Mamun20-Nov-13 23:13 
GeneralRe: My vote of 5 Pin
Sampath Lokuge20-Nov-13 23:21
Sampath Lokuge20-Nov-13 23:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.