Working with Knockout.js Part 1: Getting started with Knockoutjs

In this post we will take a look on Knockout.js. We will start with basic theoretical introduction and then to some basic demo on Knockout.js

image

Knockout.js helps us to create dynamic JavaScript UI using the MVVM pattern. It simplifies the task of linking Data Model to the dynamic JavaScript UI.

Knockout.js is a JavaScript library and it helps us to create high responsive, very rich and interactive JavaScript UI adhering to MVVM pattern. It simplifies the task of binding data from Data Model to JavaScript UI. It is a pure JavaScript library and it works with almost all the browsers. It is an open source project under the license of MIT. It is very compact in size. Its zipped size is 13kb and it can be added over any existing web application.

Essentially Knockout.js helps to link a Data Model to UI. It tracks the changes and dynamically updates the UI. It helps to perform two ways binding in between UI and Data Model. It updates certain section of UI dynamically when data in data model is changed. It simplifies the task of binding and dynamic updating the UI.

Some of the features of Knockout.js can be outlined as below,

  • It detects the data changes in data model and updates respective part of the UI.
  • It binds data and UI declaratively. In other words declarative binding between data model and UI can be done using Knockout.js
  • It helps to create custom behavior. Custom behavior can be created as declarative binding.
  • Custom behavior created by Knockout.js can be reused with very less lines of code.
  • It helps to create complex dynamic UI using declarative bindings.
  • It helps to edit JSON data on the JavaScript UI.

Knockout.js is JavaScript MVVM framework and it helps in

image

Further in the post, we will explore each features of Knockout.js. You can download Knockout.js from here. You will get many versions of Knockout.js to download on the download page. For usual production purpose you can choose to download knockout-versionnumber.js file.

After downloading add reference of Knockout.js. Reference can be added as following,

image

Next let us create a ViewModel. We are going to create ViewModel for Product. A ViewModel can be created as following. You can see that in knockout ViewModel is nothing but a JavaScript array,

image

Once you have created ViewModel you need to apply binding. Binding can be applied as below,

image

Last step is to bind values from ViewModel on the view. That can be done as following. Using data-bind attribute values from ViewModel can be bind to element on View.

image

A complete example of Product ViewModel data being bind with elements of View is given below,


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.js"></script>
 <script src="Scripts/knockout-2.2.0.js"></script>
 <script type="text/javascript" >
 $(document).ready(function () {

var ProductViewModel = {
 productname: "pen",
 productprice: 200,
 producttype :"education"
 };
 ko.applyBindings(ProductViewModel);

});

 </script>
</head>
<body>

<h2>Knockout Demo</h2>
 Product Name : <span id="namespan" data-bind="text:productname"></span> <br />
 Product Price : <span id ="pricespan" data-bind="text:productprice"></span><br />
 Product Type : <span id="typesapn" data-bind="text:producttype"></span> <br />

</body>
</html>

And as expected you will get values from ViewModel on View elements as following

image

This was small introduction of Knockout.js. In further posts we will get into more details of Knockout.js and see examples of its usage in real examples. I hope you find this post useful. Thanks for reading

What is JSON?

For some of you this question might be the easiest to answer. But for many developers concept of JSON is not well understood. In my seminars when I use JSON data for demo, I find many developers do not have understanding of JSON. In this post I am trying to address this problem.

In simple words, “JSON is a data interchange format. Due to its lightweight characteristics it is being highly used to exchange data between different platforms and applications”

image

A simple JSON data representing Students can be like following,

image

You can see that JSON object follows key-value pair mechanism

  • Key should be always a string
  • Value may be a string , number , Boolean or an object

image

You can represent collection in JSON as well. That can be represented as array of JSON objects.

image

Information about many Students can be displayed in JSON format as following,

image

You can have JSON object as value of another JSON object as well.

image

Now let us see that how can we work with JSON in JavaScript. Let us say we have a HTML page as given in the following snippet,


<body>

<h2>Reading Student information from JSON data</h2>
 Name : <span id="namespan"></span> <br />
 Marks : <span id ="marksspan"></span><br />
 Addreess : <span id="addresssapn"></span> <br />

</body>

In JavaScript we have JSON data and we need to bind values of JSON in to the HTML elements. We can do that very simply as given in following snippet,


<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.js"></script>
 <script type="text/javascript" >
 $(document).ready(function () {

var Student = {
 "name": "dj",
 "marks": 89,
 "address":
 {
 "city": "Pune",
 "country": "India"
 }
 };
 document.getElementById('namespan').innerHTML = Student.name;
 document.getElementById('marksspan').innerHTML = Student.marks;
 document.getElementById("addresssapn").innerHTML = Student.address.city;

});

 </script>
</head>

When you browse HTML you will find HTML elements values are displaying JSON data.

image

I hope now you have some understanding of JSON. Thanks for reading this post.

How to do Unit Test using NUnit : Part 1

Unit Testing is essential part of any production code. We can see rise of Test Driven Development (TDD) approach in many development projects. There are certain pros and cons of TDD but certainly we cannot ignore TDD way of software development. I read many blogs and tweets about TDD and got inspired to do some testing. I started learning to do unit testing of my codes. On searching I found NUnit an open source Unit Testing framework is the optimum way to start with Unit Testing. I downloaded NUnit from here and started my testing journey. After successful installation you will get NUnit GUI shown in below image,

image

What are we going to do Unit Test?

Before we move ahead in this blog post, let us discuss the code we are going to test. What to Unit Test and what not to Unit Test decision making is very simpler. If unit of code contains any logic then we must do unit testing of that code.

image

In this blog post we are going to test a basic function called DivideByZero. This function will return a false value if divisor is equal to zero. DivideByZero function is as following

image

How to do Unit Test ?

To write first Unit Test, we need to create a Test Project. To create a test project create a class library project. While writing Unit Test we should follow naming convention.

image

Since name of the project we are testing here is CalculatorLibraryToTest hence we will create test project with name CalculatorLibraryToTest.Test . Next we will create a class with the name CalcLibraryTest since function we are going to test is inside the class CalcLibrary.

Adhering to naming convention we can create test class as following ,

image

To tell NUnit explictity that this class is not a normal class rather a test class , we need to attribute the class with [TestFixture]

As of now we have written class that is going to hold the NUnit tests. Next we need to write Unit Test. We are going to test function DivideByZero and to create Test function we will follow naming convention.

  1. We are verifing that divisor parameter is zero or not . So this appened as second part of the test function.
  2. We are expecting if passed parameter is 0 then expected result would be false. So this is appened as third part of the function.

To tell NUnit explictly that this function is not a normal function rather a test function , we need to attribute the function with [Test]

 

image

Since we have test function is in place let us go ahead and write the code to test . In test we are creating object of the class CalcLibrary and then calling the function with required parameters.


using NUnit.Framework;

namespace CalculatorLibraryToTest.Test
{

[TestFixture]
public class CalcLibraryTest
{
[Test]
public void DivideByZero_IsDivisorZero_ReturnsFalse()
{
CalcLibrary  testobject = new CalcLibrary();
bool result = testobject.DivideByZero(56, 0);
Assert.IsFalse(result, "divisor passed is 0 ");

}
}
}

In above code we are using Assert. We will see in detail about Assert in further blog posts. Essentially we are asserting that returned result should be false.

To perform Unit Test go ahead and open NUnit project editor and open exsiting project. You need to provide test assemly name to test. Here we can see that unit test is passed.

image

In this way we can perform unit testing using NUnit. In further posts we will get into details of Uni Testing. I hope you find this post useful. Thanks for reading.