An innovative new JavaScript library that guarantee to bring most enjoyable experience to client side development. KO library provides MVVM (Model-View-View Model) framework.

  • Model: Objects in business domain
  • View: User interface that is visible to user
  • ViewModel: Code representation data/operation on UI

Key Features

  • Declarative Bindings – Provide rich set of declarative bindings. Ex – 2Way data binding
  • Automatic UI Refresh – UI will change automatically when ViewModel is updated
  • Dependency Tracking- Properties that depends on other properties and whole dependency tracking chain will update when ViewModel changes
  • Templating

Installation

KO is available in NuGet packages

KO

Getting started – Let’s keep the things simple

HTML – Here we have created simple HTML page with article followed by textbox and a paragraph tag with contains “Overview of article” followed by empty span tag and off Couse at last apply button.

Script – Script tag contains jQuery ready function so that it executes at startup. This function has ViewModel which is the center of MVVM framework (KO). To this ViewModel we added article property with initial value “Knockout”. We also added changeArticle function that will update article property to “KO”. At last we have applied binding to KO by passing in ViewModel. This is the central command that makes KO work. It will apply these bindings to all DOM elements using this ViewModel for those bindings

Adding Bindings to DOM elements – KO uses data-bind attribute. In case of textbox we have to bind value attribute with article property and similarly for the span tag. In case of button we will use click event to bind changeArticle method.

 

Sample Code

<html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
       <title></title>
       <script src="Scripts/jquery-1.8.3.js"></script>
       <script src="Scripts/knockout-2.2.0.debug.js"></script>
   </head>
   <script>
           $(function () {
               var viewModel = {
                   article: ko.observable("Knockout"),
                   changeArticle: function () {
                       this.article("KO");
                   }
               };
               ko.applyBindings(viewModel);
           })
   </script>
<body>
   Article : <input type ="text" data-bind ="value: article"/>
   <p>
       Overview of article : <span data-bind ="text: article"></span>
   </p>
   <button data-bind="click: changeArticle">Apply</button>
</body>
</html>

Output

KO Output

TIP: For quick R&D use URL – http://jsfiddle.net/wuafq/

 

Share Button

One Thought on “Knockout

  1. Thanks regarding furnishing this kind of fantastic content material.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation