Post
Ask Question

Getting Started With Knockout.js

Here the agenda is to run through several things, kind of a nutshell first. Since this is a Knockout.js introduction we will talk about why we should use Knockout a little bit and then I get into the core fundamentals of Knockout. What is observable, how you do computed and what is an observableArray. Then an overview of KO (KO is the second name of Knockout) so KO with MVVM or Knockout with MVVM.

So look at all these kinds of things and then we have a look at installation and a simple demo as we go through.

What Knockout.js is

Knockout is an application library rich in JavaScript by Steven Sanderson originally who is now with Microsoft when he wrote it he was not with Microsoft.



It uses the MVVM pattern which is the Model View View Model pattern and provides rich client-side interactivity, Don't worry about the browser support, your browser can support Knockout If you are using IE 6 or up.

And now your question must be, what are the benefits of Knockout?


  • First you can connect UI elements with data a model anytime.
  • You can easily create a complex dynamic data model.
  • Automatically update the UI when the Data Model is changed, when the UI is changed then the Data Model is changed automatically.
  • Supports an event-driven programming model.
  • Extend custom behavior very easily.

Now understand the main three core pieces of Knockout that help you to understand what you gain from Knockout.

First pieces is Observable



You need to tell Knockout about the updating of your view model part and for that you need to declare your model properties as Observable. As in the following example:

 

  1. var myViewModel = {  
  2.    FirstName: ko.observable(“FirstName”),  
  3.    LastName: Ko.observable(“LastName”)  
  4. };  

Since we have an interface called I-notify property change that can be applied to classes in C# or VB they allow us to communicate between the properties of those classes and to the UI. What that means is it means when use type types a value in a text box, it will automatically save that value into the backing model, the view model and when the model is updated it automatically syncs to the UI.

Second pieces are Computed


Now for the Computed observables, they are functions that are dependent on one or more other observables and will automatically update whenever any of these dependencies change.

Like you have one observable for firstName, and another for lastName, and you want to display the full name.

The last core pieces of Knockout is observableArray as in the following:



ObservableArray is used when you want to detect and respond to changes of a collection of things, it is mainly used in that scenario in which you are displaying or editing multiple values and need repeated sections of the UI to appear and disappear as items are added and removed.

So how do you do Knockout.js? It's simple, in just the following 3 steps:


  • First do a declarative binding in the HTML
  • Then in your JavaScript create an observable
  • Finally, bind the viewmodel to the view

Let's understand the MVVM pattern. It will help you to understand how Knockout.js data binding is done between your JavaScript and HTML.



The Model is responsible for holding application data and the view is responsible for presenting the model data to the user, finally the ViewModel is responsible for establishing the communication with the View and Model.

Knockout.js is just simplifies the MVVM data-binding process by using observables to dynamically change viewmodel properties upon changes to the view.

Now let's setup development environment for Knockout.js and then we will see a simple demo

Now to setup development environment in Visual Studio

  • First create an ASP.NET Empty Web Application

  • Add Knockout library in project

    You can Manually adding KO JS files locally in project

    Or using NuGet to add KO reference files to the project.

    I am adding references using NuGet.

    Go to Manage NuGet Package by right-clicking on the project and from the context menu select the option for Manage Nuget Package.



    Search for Knockout.

    You will get knockoutjs as the first option. Click on Install.



  • After installing Knockout, search for jQuery and install that in the project as well.



    Your environment is all set for the demo.

    Now to see how Knockoutjs works.

  • Add a HTML file to your project.

  • On the HTML file you need to add references for the knockoutjs file and jQuery file in the head section.





    Now for the View part, the View is nothing but HTML elements.

  • First create two fields to display the values as in the following:

     

    1. <p>First Name :<strong data-bind="text:initialName"></strong></p>  
    2. <p>Last Name :<strong data-bind="text:lastName"></strong></p>  

     

  • Then take two HTML input controls for entering the values and now here we need to use a data-bind attribute of HTML5 to bind the data from a data source.

     

    1. <input data-bind="value:initialName" />  
    2. <input data-bind="value:lastName" />  

     

    Now for the ViewModel part.

  • Create a JavaScript function and to enable Two Way Binding properties of an object. Declare your model properties as observables; this will help to bind the data to be edited and modified at run time. 
    1. function koapp() {  
    2.    this.initialName = ko.observable();  
    3.    this.lastName = ko.observable();  
    4. };  
  • And then call this function in the applyBinding.
    1. ko.applyBindings(new koapp());  

Complete Code

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>My first Ko Application</title>  
  5.     <script src="Scripts/knockout-3.0.0.js"></script>  
  6.     <script src="Scripts/jquery-2.0.3.js"></script>  
  7. </head>  
  8. <body>  
  9.     <p>First Name :<strong data-bind="text:initialName"></strong></p>  
  10.     <p>Last Name :<strong data-bind="text:lastName"></strong></p>  
  11.     <input data-bind="value:initialName" />  
  12.     <input data-bind="value:lastName" />  
  13.     <script type="text/ecmascript">  
  14.         function koapp() {  
  15.             this.initialName = ko.observable();  
  16.             this.lastName = ko.observable();  
  17.         };  
  18.         ko.applyBindings(new koapp());  
  19.     </script>  
  20. </body>  
  21. </html>  

Now let us proceed to run the application.



When you change the value in any of the input boxes, the label value will be immediately changed. So we have seen that two-way binding and automatic UI refresh is very simple to implement using Knockoutjs.


Thank the you.


Similar Articles