All posts by Thiyagu

Knockout js Features

KnockoutJS was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee on July 5, 2010. KO is basically a library written in JavaScript, based on MVVM pattern that helps developers build responsive and rich websites. The model separates the application’s Model, View (UI) and View Model (JavaScript Representation of model). Let we discuss about features of KO.

Features of KnockoutJS

Elegant Dependency Tracking

Knockout automatically updates the right parts of your UI whenever your data model changes. You no need to worry about adding event handlers and listeners for dependency tracking like in Jquery.

Extensible

This implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code. KnockoutJS is independent of any other framework and it is compatible with other client or server side technologies.

Templating

Knockout can use alternative template engines for its template binding. Knockout has a native, built-in template engine which you can use right away and can be customize how the data and template are executed to determine the resulting markup.

Benefits of KO

If we implement KO with your web application then we can get the following benefits:

  • Easily we can create complex dynamic data model.
  • Anytime we can connect UI elements with data model which is synchronized.
  • Automatically UI will update when Data Model is changed. If any UI changed by user or in back-end then Data Model will change automatically.
  • It support event-driven programming model.
  • It mainly support all the browsers(Internet Explorer, FireFox, Crome, Safari).

KO with MVVM

What is MVVM?, the full form of MVVM is Model View ViewModel. It is an architectural design pattern designed by Microsoft and mainly created for WPF/Silverlight applications. KO builts on MVVP architectural design pattern. So if you want to understand KO properly, then you should know about MVVM.

Overview of MVVM:

MVVM stands for Model,View, ViewModel.

Model: Responsible for holding Application data. In simple, its refers either to a domain model or to the data access layer, which represents content

View: Responsible for presenting model data to the user. Its nothing but a User Interface which is getting information from the user.

ViewModel: Connector of Model and View. Main responsibility is to establish communication with View and Model. It holds data and function.Functions manipulate that data and it reflect to the UI. When data is changed in UI by the user, then data will be changes.If data is changed by the back-end then the UI will change accordingly. ViewModel will do it for us with the help of data-binding concept.

knockout js mvvm

practice knockout

MVVM Benefits

  • Provide more flexibility of designer and developer works.
  • The ViewModel is easier to unit test than code-behind or event-driven code.
  • Provide flexibility to change user interface without having to re-factor other logic of the code base
  • The presentation layer and the logic is loosely coupled.

Difference between Abstract Classes and Interfaces

Difference between Abstract Classes and Interfaces

Abstract Interface
Abstract class can have abstract and non-abstract methods                                                  .Interface can have only abstract methods and abstract class can have field/property but interface not allow it.
Abstract class doesn’t support multiple inheritanceInterface supports multiple inheritance.
It can use access modifierBut interface wont have it because within an interface by default everything is public
It can have final, static ,non-final and non-static variablesInterface has only final variables and static
It can provide the implementation of interfaceInterface can’t provide the implementation of abstract class

 

Let us discuss the difference one by one with simple example.

Abstract class can have abstract and non-abstract methods. Interface can have only abstract methods and abstract class can have field/property but interface not allow it.

Abstract Class:

public abstract class Employee
{
public string FirstName;
public string LastName;
public override int GetFullName()
{
return this.FirstName + " " + this.LastName;
}
}

Interface : Wrong

public interface IEmployee
{
// Cant use field in interface
public string FirstName;
public string LastName;
//Implementation & access specifier will not accept
public int GetFullName()
{
return this.FirstName + " " + this.LastName;
}
}

Interface : With Proper

public interface IEmployee
{
void GetFullName();
}

Note : In simple, An abstract class can has implementation or non-implemented methods but interface can’t have implementation for any of its method.

Abstract class doesn’t support multiple inheritance. Interface supports multiple inheritance.

It’s not possible to inherite more than one abstract class. For example, if we having two abstract class namely Employee , EmployeePersonalDetails.

Abstract: Error

//Multiple class can't be inherit. 
class PartTimeEmployee : Employee ,EmployeePersonalDetails
{
... code here....
}

Interface: It support multiple inheritance

class PartTimeEmployee : IEmployee ,IEmployeePersonalDetails
{
... code here....
}

 An abstract class can access modifier but interface wont have it because within an interface   everything is public in default.

Interface : Incorrect

public interface IEmployee
{
public void GetFullName();
}

Interface : Correct

public interface IEmployee
{
void GetFullName();
}

 

 

Abstract class vs Concert Class

In most of the interviews, we face the struggle to explain the scenarios for the concrete, abstract & interface classes. This leads to the interviewer to have bad impression.

Why we are moving to the abstract instead of Concrete class?

When should we use concrete, abstract, interface?

After these types of questions, we will get bit confused to answer. So in this post, we are going to discuss ‘how’ and ‘where’ to use the concrete and abstract classes.

Requirement:

Let us consider that a company requires the details like full name, salary details etc., of their employees working full time and part time. Based on the above requirement, let us create the two classes like FullTimeEmployee, PartTimeEmployee as shown below.

FullTimeEmployee Class

class FullTimeEmployee : AbstractBaseClass
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int YearlySalaray { get; set; }
public string GetFullName()
{
return this.FirstName + " " + this.LastName;
}
public override int GetMonthlySalary()
{
return this.YearlySalaray / 12;
}
}

PartTimeEmployee Class

class PartTimeEmployee : AbstractBaseClass
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int HourlySalaray { get; set; }
public int TotalHour;
public string GetFullName()
{
return this.FirstName + " " + this.LastName;
}
public override int GetMonthlySalary()
{
return this.TotalHour * this.HourlySalaray;
}
}

Disadvantage:

From the above two classes, we are able to get the details from both type of employees by creating instances of those.But we can observe that there are many repeated properties and methods presented in both classes like FirstName, LastName, GetFullName(), GetMonthhlySalray() . To avoid these type of redundancies, now we are going to create one more class called BaseEmployee to handle the common properties and methods.

Concrete Classes:

A Concrete class is a normal class so we can use it as a base class (optional), it cannot contain abstract methods.

Based on the above conclusion, the common properties and methods have moved the class called BaseEmployee. The GeMonthlySalary() method need to be declared as virtual because the BaseEmployee class doesn’t know how to provide the implementation for both the FullTimeEmployee & PartTimeEmployee classes because it is calculating the salary based on the employee’s type.

When to use?

Base class might be best option when all of your child classes can share the same implementations of the members on the base class.

BaseClass:

class BaseEmployee
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string GetFullName()
{
return this.FirstName + " " + this.LastName;
}
public virtual int GetMonthlySalary()
{
throw new NotImplementedException();
}
}

FullTimeEmployee Class

class FullTimeEmployee : BaseEmployee
{
public int YearlySalaray { get; set; }
public override int GetMonthlySalary()
{
return this.YearlySalaray / 12;
}
}

PartTimeEmployee Class

class PartTimeEmployee : BaseEmloyee
{
public int HourlySalaray { get; set; }
public int TotalHour;
public override int GetMonthlySalary()
{
return this.TotalHour * this.HourlySalaray;
}
}

If we create an instance of both classes, then application will run without any error and give results. Still we are having some disadvantages of using concrete Classes and those are mentioned below

Disadvantage:

1) There is nothing that stops us from creating an instance for the Baseclass.
2) If we access the non-defined method in the base class, then it will throw the error at runtime using instance. To overcome these types of issues, we are moving to the abstract class

EG: BaseEmployee baseEmp = new BaseEmployee()

baseEmp.GetMonthlySalary()

Abstract Class:

The Abstract class is a special / incomplete type of class, which cannot be initiated and it acts as a base class for other derived classes. An Abstract method must be implemented in the non-Abstract class using the override keyword. The method that is declared as abstract needs to be implemented by derived classes.

When we use the abstract class?

We can use abstract class when we want to move the common functionalities of two or more related classes in to the base class and we don’t want the base class to initiate.

Let us create the “AbstractBaseClass” instead of concrete Base class as shown below. The “GetMonthlySalary()” is declared as abstract so we no need to provide the implementation. So within the derived class, we are going to provide the implementation by overriding it.

abstract class AbstractBaseClass
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string GetFullName()
{
return this.FirstName + " " + this.LastName;
}
public abstract int GetMonthlySalary();
}

FullTimeEmployee Class

class FullTimeEmployee : AbstractBaseEmployee
{
public int YearlySalaray { get; set; }
public override int GetMonthlySalary()
{
return this.YearlySalaray / 12;
}
}

PartTimeEmployee Class

class PartTimeEmployee : AbstractBaseEmloyee
{
public int HourlySalaray { get; set; }
public int TotalHour;
public override int GetMonthlySalary()
{
return this.TotalHour * this.HourlySalaray;
}
}

Note:

  • An abstract class can contain either abstract methods or non-abstract methods.
  • Abstract members do not have any implementation in the abstract class, but the same has to be provided in its derived class.
  • The access modifier of the abstract method should be same in both the abstract class and its derived class.
  • An abstract class cannot be a sealed class.
  • An abstract method can’t be private and static.

.insertAfter() method in Jquery

Description:

The jQuery insertAfter() methods is used to add the contents after the selected elements.

Syntax

  • $(selector).insertAfter(target)

Difference between jQuery after() and insertAfter() 

The main difference between after() and insertAfter() method is their syntax and their placement of the target and content location.

  • after(): $(selector).after(content)
  • insertAFter : $(content).insertAfter(selector)

Example: 

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnClick').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text </div>').insertAfter("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="btnClick">Click to Add content using insertAfter()</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append after the selected div (divcontainer).

.before() method in Jquery

Description:

The jQuery before() method is used to insert content before the selected element.

Syntax

  • $(selector).before(content)
  • $(selector).before(content, function(index))  
ContentIt specifies the content which need to append.
Function(index)It specifies the function that returns the content which used to insert.

index: Get the index position of the element in the set

Passing Function:

.before() supports passing a function that returns the elements to insert like as below. It can accept any number of additional arguments like prepend(), after().

 $("#divcontainer").before(function () {
     return "<div>Welcome to Dotnet-helpers.com</div>";
  });

Example: 

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnClick').click(function () {
 $("#divcontainer").before('<div style="color:#ff0000"> This is Newly added text </div>');
 })
 });
 </script>
</head>
<body>
 <button id="btnClick">Click to Add content using before()</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append befor the selected div (divcontainer).

.after() method in Jquery

Description:

The jQuery after() method is used to insert content after the selected element.

Syntax

  • $(selector).after(content)
  • $(selector).after(content,function(index))
ContentIt specifies the content which need to append.
Function(index)It specifies the function that returns the content which used to insert.

index: Get the index position of the element in the set

Passing Function:

.after() supports passing a function that returns the elements to insert like as below. It can accept any number of additional arguments.

 $("#divcontainer").after(function () {
     return "<div>Welcome to Dotnet-helpers.com</div>";
  });

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").after('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button id="addMethod">Click to Add content as First Child</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append after the selected div (divcontainer).

 

.prependTo() method in Jquery

Description:

The Jquery prependTo() method is used to add additional content at the beginning of the selected elements. It is same like as prepend() method, it will add content as the first child of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

  • $(content).prependTo(selector)

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text</div>').prependTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="addMethod">Click to Add content as First Child</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

.prepend() method in Jquery

Description:

The jQuery prepend() method is used to insert the content in the beginning of the selected elements.It will append the content as the first child of the selected element. It will app It just inverse of append() method.

Syntax

  • $(selector).prepend(content)
  • $(selector).prepend(content, function(index, html))
ContentIt specifies the content which need to append.
Function(index,html)It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").prepend('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

.appendTo() method in Jquery

Description:

The Jquery appendTo() method is used to add additional content at the end of the selected elements. It is same like as append() method, it will add content at the end of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

  • $(content).appendTo(selector)

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text <div/>').appendTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

.append() method in Jquery

Description:

The jQuery append() method is used to insert specified content to the end of the set of matched elements.

Syntax

  • $(selector).append(content)
  • $(selector).append(content, function(index, html))
ContentIt specifies the content which need to append.
Function (index,html)It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").append('<div style="color:#ff0000"> This is Newly added text', function (index, html) { alert("hi") });
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: