Follow @endyourif rss Facebook LinkedIn

Knockout js Tutorial

Knockout js is an open source JavaScript library. It was built to allow you to create dynamic and rich web applications; making it an extremely useful library when making single web page applications. It is built with the Model-View-ViewModel (MVVM) pattern. Knockout makes it really simple to implement a complex user interface that responds to user interactions.

I like Knockout because it is one of the most lightweight JavaScript libraries available today. It also doesn't try to be an all-in-one framework. It serves a single purpose: data binding your ViewModel to your user interface.

Implementing Knockout.js official site involves three distinct things: a view that contains HTML and CSS elements that get data-bound to it, a ViewModel that contains the data to bind to the view, and telling Knockout to perform the data binding to the view with the ViewModel.

Knockout JS Tutorial

What is Knockout js?

  • Uses the Model-View-ViewModel pattern to help create dynamic/automatic UI refreshes
  • Dynamic class bindings with observable objects
  • Works seamlessly with ASP.NET MVC Razor Views
  • Knockout is different from jQuery because it focuses on creating dynamic, single web page applications
  • Bind all aspects of a DOM element using the attr data binding
  • Whether you are a beginner or expert with Knockout js, these tutorials will provide you with essential examples by providing real-world demos.

Knockout js Examples

Below are a list of Knockout js articles that will provide the essential tools to take you from a beginner to an expert with Knockout js by providing clear and concise demos with practical, real-world examples. Whether you are looking for beginner tutorials or advanced tutorials these examples will provide the essentials to become more proficient with the Knockout js library.

jQuery Datepicker with a Knockout js custom data binding

Whether you are using the Bootstrap datepicker or the jQuery datepicker, they both use the same underlying JavaScript library. So with today's example, let's explore implementing the jQuery library with an added bonus of creating a Knockout js custom binding. The end goal of this custom data bind is to create a form input field data bound not to the standard value binding, but instead to the custom one appropriately named: datepicker.

Custom Knockout js binding to confirm before variable change

This example demonstrates how to create a custom ko.extender that will perform a JavaScript confirm prior to changing the value of your ko.observable. This snippet also contains a nice piece of additional functionality to only perform the confirm when a certain condition is met. For example, only show the confirm dialog when the observable is being changed from false to true.

Knockout js - Uncaught ReferenceError: Unable to process binding

This tutorial describes the best debugging technique to solve the dreaded "Uncaught ReferenceError: Unable to process binding" when developing with Knockout js. When you are beginning your road with Knockout, it is very easy to make a mistake data binding an observable. This article demonstrates by example the most useful technique for debugging your data binding issue. Trial and error really helps you learn how Knockout js works.

Knockout js - Creating a custom component

This tutorial demonstrates the ins-and-outs of creating a re-usable Knockout js component with a very detailed and useful example. A Knockout js component is a self-contained UI element that simplifies your code into bit size chunks allowing you to make re-usable elements with a component data binding. This tutorial walks your through creating a component that will check/uncheck all checkboxes inside a computed observable array

Knockout js - Computed Observables

In JavaScript, the `this` variable inside a function (like a computed observable or a Knockout subscribe) function can be an extremely useful variable to access related properties to your observable. Learning the following behavior has opened many doors for me when leveraging the Knockout js framework. When declaring a computed observable, Knockout provides the ability for you to override what the `this` variable inside of your function's data that can be accessed.

Knockout js - foreach afterRender

I have been using Knockout js's afterRender for years to hide a progress bar when the foreach loop completed. All of those years I have been using it incorrectly. Once I read Knockout's documentation about the foreach afterRender function, I realized that it is actually called after each render of the element inside the foreach. This is definitely not how I wanted this function to work. Let me show you my solution to accomplish applying the afterRender when the foreach has completed.

Knockout js - Replacing Radio Buttons with a Button Group using Bootstrap

Leveraging Bootstrap which provides many incredibly styled components for buttons, alert boxes, tables, forms, etc… regular radio buttons will be replaced by a button group (see screenshot below). Knockout js will be used to create a custom data binding that will make the group of buttons act like regular radio buttons (with a nicer look of course).

Knockout js and Bootstrap radio button group

Knockout js - How to implement an (Un)Check All on checkboxes

You have a list of elements - such as emails or any other list of data - and you want to provide the user a one-click button to select (or unselect) all items in the list. A nice added bonus, you want to automatically update the "global" checkbox indicating when all items are checked (and unchecking it when all items are not checked).

ASP.NET MVC 5 with Bootstrap and Knockout js

I can't believe 9 months has gone by since I came to an agreement on writing two books with O'Reilly Media! The first book was on Knockout js which is a great framework that focuses on the Model-View-ViewModel (MVVM) architecture pattern. I finished the initial draft at the end of September 2014. During October and November, I multi-tasked by writing the second book while working through copy edits and multiple rounds of QC on the first book.

How does Knockout JS work?

Knockout is different from a library like jQuery because it focuses on one particular aspect of a web page: binding data using observable variables, computed observables, and computed observable arrays. It doesn't do thing like AJAX requests; however, pairing Knockout js with jQuery is an excellent way to perform an AJAX request then using the results to data bind to one of your view model variables. Knockout will then detect, through a subscription, and tell the browser when to dynamically refresh the UI.

The library plays really nicely with server-side technologies like ASP.NET MVC and Web API. The Web API can be used to return JSON data via an AJAX call. With MVC, you can take your Model and convert it to a Knockout ViewModel in your Razor view. It is a seamless way to transition from MVC to MVVM.

If you are looking for a book about Knockout js, I have written two books. The first Knockout js book is focused on all aspects of Knockout that will take you from a beginner to expert in a few days. The second ASP.NET MVC 5 with Bootstrap and Knockout js book demonstrates how to use MVC and Knockout js that finishes with a full example on creating a shopping cart experience. It includes a very nice Knockout component. Both books are available in PDF format.

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP