O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building a Single Page Web Application with Knockout.js

Video Description

Create a complete and structured single page application by doing more with less code using Knockout.js

About This Video

  • 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

  • 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.

    Table of Contents

    1. Chapter 1: Exploring Knockout.js
      1. Course Overview 00:02:08
      2. Declarative Bindings 00:02:02
      3. Automatic UI Refresh 00:01:35
      4. Dependency Tracking 00:01:39
      5. Templating 00:02:18
    2. Chapter 2: Using Knockout.js
      1. When to Use Knockout 00:01:29
      2. Complex Interactions between Components 00:02:15
      3. Understanding MVVM 00:02:44
    3. Chapter 3: Getting Started with Knockout Docs
      1. Creating a Basic Document 00:03:20
      2. Keeping a List of Documents 00:02:35
      3. Selecting a Document to Edit 00:02:36
      4. Working with Classes 00:04:42
      5. Keeping Code Organized Using Templates 00:02:13
    4. Chapter 4: Common Errors and Debugging
      1. Common Errors 00:01:58
      2. Debugging Techniques 00:02:51
      3. Chrome Extension: Knockout Context Debugger 00:01:37
      4. Using Subscriptions for Debugging 00:03:37
    5. Chapter 5: A More Complex Type: Spreadsheets
      1. Creating a Spreadsheet Class 00:02:06
      2. Creating a New Template 00:02:24
      3. Creating New Items through the UI 00:03:19
      4. Adding Rows and Columns (ViewModel Side) 00:04:13
      5. Adding Rows and Columns (View Side) 00:04:59
    6. Chapter 6: Advanced Techniques
      1. Filtering Data 00:06:39
      2. Auto-saving Using Throttled Computed 00:04:18
      3. Introduction to Custom Bindings: Adding Animation 00:04:48
      4. Custom Binding: Sortable 00:04:11
    7. Chapter 7: Working With Forms: Creating Surveys
      1. Creating a Survey Class 00:03:47
      2. Adding Checkbox Questions 00:03:35
      3. Adding Radio Button and Select List Questions 00:03:15
      4. Adding a Preview Mode 00:04:41
    8. Chapter 8: Saving and Loading Data
      1. Overriding toJSON 00:07:27
      2. Loading Data from the Server 00:05:58
      3. Additional Tools and Resources 00:04:04