KnockoutJS by Example

Book description

Develop rich, interactive, and real-world web applications using knockout.js

About This Book

  • Master the full range of features provided by knockout.js such as declarative binding, automatic refresh, dependency tracking, and templating using this project based guide
  • Tackle real-world problems such as page navigation, forms, composite UI components, maps integration, server interaction for CRUD operations, and application security
  • Discover the power of knockout.js as you build applications with complexity ranging from beginner to advanced
  • Extend and customize knockout.js to harness its full potential
  • Integrate with third party libraries and APIs to build fully featured applications

In Detail

KnockoutJS By Example is a project-based guide that introduces the key features and concepts of knockout.js. It helps you create an application skeleton and a Hello World application. You will develop a To-Do list application that aims to show the basic features of knockout.js in action, such as data binding and observables, following which you will develop a dynamic online customer registration form that captures and validates customer information. This book will further walk you through developing a customer banking portal, which demonstrates the use of knockout.js with components such as navigation bars, tabs, carousels, master details view, panels, forms, and wizards. You will also discover how to use token-based authentication and authorization to secure the customer banking portal, and move on to creating an editable products grid with CRUD operations. Finally, you will explore how to use the Google Maps API with knockout.js.

KnockoutJS By Example will not only leave you with a basic understanding of knockout.js fundamentals but also take you through some of the advanced features. It will help you get a web application up and ready instantly.

What You Will Learn

  • Explore the basic concept behind the Model-View-View Model (MVVM) design pattern and how it is implemented by knockout.js
  • Develop a modular application skeleton based on the Module Pattern that can be used as a template for your projects
  • Use knockout.js with other libraries and APIs, such as JQuery, Bootstrap, and the Google Maps API, to give your users a richer experience
  • Create real-world dynamic web forms to capture user information and learn how knockout.js makes it easier to capture, validate, and submit form data
  • Develop and use dynamic UI components such as grids, tabs, master details view, and wizards
  • Extend knockout.js to add custom extenders, binding handlers, subscribers, and observables
  • Secure your single page application using token-based authentication

Who This Book Is For

This book is intended for designers and developers who want to learn how to use Knockout to develop rich, interactive, and modular web applications. The book assumes no prior knowledge of the Knockout library but basic familiarity with HTML, CSS, and JavaScript would be helpful.

Style and approach

The book takes an iterative approach in explaining and building the sample applications. The applications are built in small portions with each portion delivering a set of features. It is an easy-to-follow yet comprehensive hands-on guide, which is full of real-world applications.

Table of contents

  1. KnockoutJS by Example
    1. Table of Contents
    2. KnockoutJS by Example
    3. Credits
    4. About the Author
    5. Acknowledgment
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
      7. License
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Getting Started
      1. Understanding the MVVM design pattern
        1. The model
        2. The view model
        3. The view
      2. The key features of Knockout
        1. Declarative bindings
        2. Automatic UI refresh
        3. Dependency tracking
        4. Templating
      3. Understanding the module pattern and its use with Knockout
        1. The concept
        2. Public and private members
        3. Initializing the module
        4. Using the module with view model
      4. Building the address book application
        1. A word on the development environment
        2. Downloading the libraries
        3. Creating the skeleton
        4. Adding the application features
          1. Capturing and storing contacts
          2. Displaying contacts
        5. Adding style to your application with Bootstrap
      5. Resources
      6. Summary
    10. 2. Creating a To-do List Application
      1. Creating the skeleton
      2. Adding and viewing tasks
      3. Deleting a task
      4. Completing a task
      5. Setting priority for a task
      6. Sorting tasks by priority and name
      7. Viewing the number of total and completed tasks
      8. Summary
    11. 3. Creating an Online Customer Registration Form
      1. Getting started
      2. Capturing personal information
      3. Capturing contact details
      4. Capturing residential and postal addresses
      5. Capturing credit card details
      6. Capturing interests
      7. Clearing the registration form
      8. Summary
    12. 4. Adding Validation to the Customer Registration Form
      1. Validating the model using Knockout extenders
      2. Validating model using the Knockout validation plugin
        1. Getting started
        2. The basics
        3. Validating personal information
        4. Validating contact details
        5. Validating address details
        6. Validating credit cards
      3. Summary
    13. 5. Creating a Customer Banking Portal
      1. Creating the skeleton
      2. Navigating between application features
      3. Viewing contact details and information about the bank
      4. Viewing accounts
      5. Viewing transactions for an account
      6. Viewing personal information
      7. Summary
    14. 6. Enhancing the Customer Banking Portal
      1. Updating personal information
      2. Cancel updating the personal information
      3. Validating personal information
      4. Transferring funds between accounts
        1. Creating the Transfers tab
        2. Creating the wizard component
        3. Adding functionality to the wizard
      5. Summary
    15. 7. Securing the Customer Banking Portal
      1. Authentication mechanisms
        1. Basics of the token-based authentication
          1. Token versus session in cookies
          2. JSON Web Token
      2. Logging in to the application
        1. Creating the authentication module
        2. Creating the login screen
        3. Refactoring the BankPortal module
        4. Testing the application using different user accounts
      3. Validating the login form
      4. Handling the authentication error
      5. Displaying the logged in user
      6. Logging out of the application
      7. Summary
    16. 8. Building an Editable Products Grid with CRUD Operations
      1. A word on REST
      2. Installing and running the sever
      3. Creating the skeleton
      4. Displaying the list of products
      5. Deleting a product
      6. Adding a product
      7. Updating a product
      8. Summary
    17. 9. Using Google Maps APIs with Knockout
      1. Creating the skeleton
      2. Capturing address using autocomplete
      3. Displaying address details
      4. Rendering the map
      5. Placing markers on the map
      6. Displaying route between markers
      7. Summary
    18. Index

Product information

  • Title: KnockoutJS by Example
  • Author(s): Adnan Jaswal
  • Release date: September 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781785288548