Free Sample
+ Collection

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

Chris Black,David Ly

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

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Video Details

ISBN 139781783284054
Course Length1 hour and 51 minutes

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

Who This Video 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.

Table of Contents

Exploring Knockout.js
Course Overview
Declarative Bindings
Automatic UI Refresh
Dependency Tracking
Using Knockout.js
When to Use Knockout
Complex Interactions between Components
Understanding MVVM
Getting Started with Knockout Docs
Creating a Basic Document
Keeping a List of Documents
Selecting a Document to Edit
Working with Classes
Keeping Code Organized Using Templates
Common Errors and Debugging
Common Errors
Debugging Techniques
Chrome Extension: Knockout Context Debugger
Using Subscriptions for Debugging
A More Complex Type: Spreadsheets
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)
Advanced Techniques
Filtering Data
Auto-saving Using Throttled Computed
Introduction to Custom Bindings: Adding Animation
Custom Binding: Sortable
Working With Forms: Creating Surveys
Creating a Survey Class
Adding Checkbox Questions
Adding Radio Button and Select List Questions
Adding a Preview Mode
Saving and Loading Data
Overriding toJSON
Loading Data from the Server
Additional Tools and Resources

What You Will 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
  • 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

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.



Read More

Recommended for You

KnockoutJS Web Development
$ 17.99
KnockoutJS Blueprints
$ 17.99
Getting Started with Knockout.js for .NET Developers
$ 15.20
Web App Testing Using Knockout.JS
$ 17.99