Building a Single Page Web Application with KnockoutJS
4.8 (5 ratings)
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.
86 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building a Single Page Web Application with KnockoutJS to your Wishlist.

Add to Wishlist

Building a Single Page Web Application with KnockoutJS

Create a complete and structured single page application by doing more with less code
4.8 (5 ratings)
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.
86 students enrolled
Created by Packt Publishing
Last updated 11/2014
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • 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.

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.

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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
Exploring KnockoutJS
5 Lectures 09:39

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

Course Overview

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.

Declarative Bindings

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.

Automatic UI Refresh

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.

Dependency Tracking

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.

Preview 02:18
Using KnockoutJS
3 Lectures 06:27

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 to Use Knockout

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.

Complex Interactions between Components

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.

Preview 02:43
Getting Started with Knockout Docs
5 Lectures 15:23

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.

Creating a Basic Document

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.

Keeping a List of Documents

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.

Preview 02:36

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.

Working with Classes

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.

Keeping Code Organized Using Templates
Common Errors and Debugging
4 Lectures 10:01

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.

Common Errors

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.

Debugging Techniques

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

Chrome Extension: Knockout Context Debugger

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.

Preview 03:36
A More Complex Type: Spreadsheets
5 Lectures 17:00

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.

Creating a Spreadsheet Class

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

Creating a New Template

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.

Creating New Items through the UI

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.

Adding Rows and Columns (ViewModel Side)

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

Preview 04:58
Advanced Techniques
4 Lectures 19:55

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.

Filtering Data

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.

Auto-saving Using Throttled Computed

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.

Introduction to Custom Bindings: Adding Animation

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.

Custom Binding: Sortable
Working With Forms: Creating Surveys
4 Lectures 15:16

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.

Creating a Survey Class

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

Adding Checkbox Questions

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

Adding Radio Button and Select List Questions

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.

Adding a Preview Mode
Saving and Loading Data
3 Lectures 17:28

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.

Overriding to JSON

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.

Loading Data from the Server

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

Additional Tools and Resources
About the Instructor
Packt Publishing
3.9 Average rating
8,138 Reviews
58,576 Students
686 Courses
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.