Building a Single Page Web Application with Knockout.js [Video]

Chris Black, David Ly

Building a Single Page Web Application with Knockout.js [Video]
Downloadable video: $39.99
save 15%!

Packt Video. Stream online or download for unrestricted offline use. Learn more

Course Contents
The Author
Sample Clip
  • New! Packt Video courses: practical screencast-based tutorials that show you how to get the job done. Bite sized chunks, hands on instructions, and powerful results.
  • Create a well-structured and organized application that you can build on and expand
  • Learn how Knockout's data-binding can help you do more with less code
  • Make use of best practices to ensure a maintainable code base

Video Details

Language : English
Release Date : Wednesday, February 5, 2014
Course Length : 1 hour and 51 minutes
ISBN : 1783284056
ISBN 13 : 9781783284054
Author(s) : Chris Black, David Ly
Topics and Technologies : Video

Table of Contents

  1. Exploring Knockout.js [09:39 minutes]
    • Course Overview
    • Declarative Bindings
    • Automatic UI Refresh
    • Dependency Tracking
    • Templating

  2. Using Knockout.js [06:27 minutes]
    • When to Use Knockout
    • Complex Interactions between Components
    • Understanding MVVM

  3. Getting Started with Knockout Docs [15:23 minutes]
    • Creating a Basic Document
    • Keeping a List of Documents
    • Selecting a Document to Edit
    • Working with Classes
    • Keeping Code Organized Using Templates

  4. Common Errors and Debugging [10:00 minutes]
    • Common Errors
    • Debugging Techniques
    • Chrome Extension: Knockout Context Debugger
    • Using Subscriptions for Debugging

  5. A More Complex Type: Spreadsheets [17:00 minutes]
    • Creating a Spreadsheet Class
    • Creating a New Template
    • Creating New Items through the UI
    • Adding Rows and Columns (ViewModel Side)
    • Adding Rows and Columns (View Side)

  6. Advanced Techniques [19:55 minutes]
    • Filtering Data
    • Auto-saving Using Throttled Computed
    • Introduction to Custom Bindings: Adding Animation
    • Custom Binding: Sortable

  7. Working With Forms: Creating Surveys [15:16 minutes]
    • Creating a Survey Class
    • Adding Checkbox Questions
    • Adding Radio Button and Select List Questions
    • Adding a Preview Mode

  8. Saving and Loading Data [17:28 minutes]
    • Overriding toJSON
    • Loading Data from the Server
    • Additional Tools and Resources

Chris Black

Chris Black is a software engineer, adjunct faculty member, and public speaker from Minneapolis, Minnesota. He has taught courses on advanced scripting, dynamic web apps, motion graphics, and interactive design. Chris currently works full time as a software developer at The Nerdery. Prior to working at The Nerdery, he was the owner of Blacktop Interactive, LLC, and developed twelve mobile apps across six different markets. He has more than 8 years' experience building software for the web and mobile devices. Chris has spoken at a number of conferences locally and internationally in Toronto, Amsterdam, and the UK. In 2011, he was the keynote speaker at the Geeky By Nature conference in New York. When Chris is away from his computer, he enjoys rock climbing, kayaking, and snowboarding.

David Ly

David Ly is a software developer at The Nerdery who works primarily in C#, ASP.NET and has a strong JavaScript skill set. He also dabbles in other programming languages such as PHP, Ruby, and Python. David has a Bachelor’s Degree in Computer Science and is a graduate of Macalester College. He has over five years of professional software development experience. David has worked with Knockout.js for over one and half years, exploring several different techniques across various projects. A father of two, he strives to balance work, family, personal development, and his love of games.
Sorry, we don't have any reviews for this video yet.

Sorry, there are currently no downloads available for this video.

Code Downloads

Download the code and support files for this video.

Support, complaints and feedback.

Packt is committed to making Packt Video courses a valuable, useful way for IT professionals to learn new skills. We have made every effort to ensure that this course reaches the required standard and will work on our customer's devices. Please go to our support page.

What you will learn from this video 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
  • Cut down on duplicate code and make code more maintainable by using inheritance with base.js
  • Create custom bindings to expand on Knockout's functionality
  • 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 this video course is for

This course is aimed at both back-end and front-end web application developers with a basic knowledge of Knockout.js and an interest in effectively building a single web page application from start to finish. A basic understanding of the JavaScript language, HTML, CSS, and object-oriented principles is expected.

In Detail

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 Knockout.js 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 Knockout.js 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.

Screenshots from the course

Creating the sample single page application

Using Named Templates

Keeping code organized using templates

Debugging Techniques

Adding Rows and Columns


Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done.

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software