Building a Single Page Web Application with KnockoutJS

Create a complete and structured single page application by doing more with less code
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
39 students enrolled
82% off
Take This Course
  • Lectures 33
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course Description

Knockout is a JavaScript MVVM (Model View ViewModel) library that helps you create rich, dynamic user interfaces with clean, maintainable code. Moreover, Knockout automatically updates the UI when your data model state changes, ridding you of the need to refresh the page. As a developer, discover how you can use KnockoutJS to architect a complete single page web application from start to finish while maintaining its structure and flexibility!

This course walks you through the process of creating a real-life web application using the MVVM pattern to add functionality to the code as it evolves. If your JavaScript often turns into a giant convoluted mess while building an application with Knockout, this video course will give you an insight on how to organize your code to avoid this.

Starting with an overview of the core concepts behind KnockoutJS to create a real-world application, you'll begin your journey by first learning to build a simplified version of Google Docs. You'll discover the power of data binding and dependency tracking to automatically keep various parts of your application in sync. Next, you’ll learn how you can use debugging techniques to track errors before moving on to creating a spreadsheet to represent more complex data structures. Lastly, you’ll learn how to create a form and then save and load a page using server side functionality.

The final section of the course lets you explore best practices and some additional tools you can use to ensure a maintainable code base.

What are the requirements?

  • A basic understanding of the JavaScript language, HTML, CSS, and object-oriented principles is expected.
  • A clear and practical approach to building a web application with sample code provided to help you every step of the way so you can see not just the final product, but also the evolution of the code base.

What am I going to get from this course?

  • Use declarative data-binding to specify what your code should do in the HTML markup
  • Write class-based JavaScript code to encapsulate functionality similar to object-oriented languages
  • Apply the MVVM pattern to utilize two-way bindings between JavaScript and HTML
  • Use knockout templates to organize and reuse markup
  • Dynamically choose a template based on the type of object
  • Learn how the "this" keyword works in JavaScript and how to use it effectively
  • Utilize computed properties to automatically track dependencies

Who is the target audience?

  • This course is aimed at both back-end and front-end web application developers with a basic knowledge of KnockoutJS and an interest in effectively building a single web page application from start to finish.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Exploring KnockoutJS

Using HTML and JavaScript to manipulate large amounts of data is tricky. KnockoutJS helps encapsulate that complexity into a more manageable form.


HTML is good at defining layouts but not so great at defining interactions. Using data-binding attributes, you can declare what the markup will be doing while leaving the how up to the JavaScript.


Manually updating the UI in response to changing data is a tedious and error-prone task. KnockoutJS handles the task of keeping HTML and JavaScript in sync for you.


Sometimes you have a property (such as a person's full name) that's dependent on other properties (such as first name and last name). KnockoutJS helps you keep track of those dependencies and propagates updates up the chain of dependencies.


One of the most common and useful features of any framework for creating a single page application is templating. While there are many excellent templating libraries out there, Knockout templates integrate well with KnockoutJS, allowing you to fully utilize all the other features of KnockoutJS.

Section 2: Using KnockoutJS

Working on a data-centric application on the web can be tricky. KnockoutJShelps you work with data in a more object-oriented manner that is more appropriate when working with data.


When there are many parts to a system, it gets difficult to keep track of all of them simultaneously. With a smartly architectured KnockoutJS solution, it is possible to keep those components as separated as possible so we can work on them in smaller chunks at a time.


Most web developers are familiar with the Model View Controller (MVC) pattern. The MVVM pattern serves a similar purpose but is more suitable for two-way data binding. MVC is typically concerned with how to output the HTML, not how to interact back and forth with the DOM.

Section 3: Getting Started with Knockout Docs

The simplest type of object we'll want to store in Knockout Docs is a basic document. We'll create an object to represent that document and bind it with Knockout.


We now have one document, but that by itself isn't that useful. With observable arrays, we can have Knockout change the tracking mechanism for the arrays of objects.


We now have a list of documents that we can display, but we need to be able to select one for editing or display. We can use an observable array to hold the currently selected document and use the with binding to display that document.


Now that our document has started to gain a little complexity, it makes sense to introduce class-based object-oriented programming into JavaScript. baseJSis a simple library that makes classes clean and easy to work with.


In server-side languages, you usually have a way to extract out parts of a view as separate files that can be included. Templates in Knockout can serve the same purpose. They can either be brought in using a server-side technology or we can use the KnockoutJS-External-Template-Engine library to bring them in asynchronously.

Section 4: Common Errors and Debugging

There are a number of common errors that developers new to Knockout encounter. We'll cover some of these common errors and how to resolve them.


A good library is helpful with debugging. Knockout offers a good amount of help with debugging. Here are some tips and tricks to help with debugging a Knockout application.


Knockout Context Debugger is a Chrome extension that lets you view the ViewModel of the currently selected DOM element.


Sometimes we want to know when the value of an observable changed. Subscriptions along with the debugger statement can help us inspect the call stack when a value changes.

Section 5: A More Complex Type: Spreadsheets

We are now ready to create a new type of document. The spreadsheet type is a more complex type that illustrates a Knockout application better.


We have a class to represent the data. Now we need a way to display it.


We have a way to display and edit items, but we don't yet have a way for users to create new ones. We'll need to add some UI elements for item creation.


Now that we have a working spreadsheet and can create new ones, we need a way for users to add new rows and columns. In this section, we will focus on the ViewModel portion of that functionality.


Now that the ViewModel portion is done, we need to set up the view to properly implement that functionality.

Section 6: Advanced Techniques

A common operation that needs to be done is filtering. This is often tricky to do on the client side, but Knockout makes the process simple.


Another common feature that is needed is autosave. By taking advantage of the dependency tracking in computed properties, we can implement a smart autosave that only triggers when a change is made.


Sometimes we need to directly modify the UI. Custom bindings allow us to do that without having the logic in the ViewModel or in the view itself.


Knockout's extensibility means that there are many third-party custom bindings that can be treated as Knockout extensions. The sortable binding is a useful one for drag-and-drop reordering of items.

Section 7: Working With Forms: Creating Surveys

We will now create our final type, a survey. As with our other types, we will create a class to house the logic and data for our survey template.


We now have a survey class with one question type. Now we add another question type for checkboxes.


Now that we have a checkbox question with multiple options, we can add question types for radio buttons and select lists.


We can now edit our survey questions, but we still need a way to preview them. We can add a toggle to switch between the edit and preview mode.

Section 8: Saving and Loading Data

A ViewModel has many properties that may not be appropriate or necessary to be saved. We can use the toJSON function to determine what gets serialized.


In addition to determining how to serialize data, we also need to determine how to populate the data retrieved from the server. We can create a complementary function called fromJSON to determine how to populate our classes from the server data.


We have now created a full single page application using KnockoutJS. There are many more advanced usage scenarios to be investigated further.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course