In this article I will explain how to work with KnockoutJs and the basic of KnockoutJs.

 KnockoutJs is a JavaScript library based on MVVM. Model view View Model .It provides 2 way data binding between view and view model using data-bind concept. Means 2 way data exchange ithout refreshing the page .for using knockoutJs library put this inside the Head tag of your page or you can download it from the website <script rc="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script> inside the head tag for using knockoutJs attributes.           

 MVVM(Model view View Model)

It is a design pattern for developing applications. It is derived from Model view controller. MVVM separates application layer, presentation layer from business logic. Now I explain about what is Model, view and View Model.

Model- Model is the domain data.

View-It is the user interface and it binds to properties of a view model through data-bind which indirectly connect to model data.

View Model-

View Model is the center place where our model data and view logics are kept together. It holds dynamic state of data.

 
    Layout = null;
}       
 
<!DOCTYPE html>
<head>
<title>KnockoutJS Observable Example</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
   <!-- This is called "view" of HTML markup that defines the appearance of UI -->
 
   <p>Enter your name: <input data-bind="value:yourName"/></p>
    <p>Enter your age: <input data-bind="value:yourage"/></p>
   <p>Hi <strong data-bind="text:yourName"></strong></p>
    <p>Your age is <strong data-bind="text: yourage"></strong></p>
    <script>
   <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->
 
    function AppViewModel() {
        this.yourName = ko.observable("Manish");
        this.yourage = ko.observable("22");
 
       
    }
 
    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
   </script>
</body>
  


OUTPUT

What is KnockoutJs

Reading

        this.yourName = ko.observable("");//Reading values


For reading values we use ko.observable property without passing any parameters.

Write

        this.yourName = ko.observable("Mindstick");//Reading values

For writing values we use above code by passing the parameters. 

It is the observable that keeps an eye on yourName variable for any changes with the help of observable it is very easy to communicate with data.

 You can also visit useful related post

What is knockout.js and how is it different from jQuery

Getting start with KnockoutJS in ASP.NET MVC 4

Binding button click event using knockout in MVC4

Click Counter using Knockout in MVC4

  Modified On Mar-17-2018 05:22:36 AM

Leave Comment