You are previewing KnockoutJS by Example.
O'Reilly logo
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

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

    What You Will Learn

  • Explore the basic concept behind the Model-View-View Model (MVVM) design pattern and how it is implemented by Knockout

  • Develop a modular application skeleton based on the module pattern that can be used as a template for your projects

  • Create single page, rich, interactive, modular, real-world applications using Knockout

  • Use knockout.js with other libraries and APIs such as JQuery, Bootstrap, and Google Maps API to give your users a richer experience

  • Create a real-world dynamic web form to capture user information and learn how Knockout makes it easier to capture, validate, and submit form data

  • Develop and use dynamic UI components such as grids, tabs, dialogs, and wizards

  • Extend knockout.js to add custom extenders, binding handlers, and observables

  • Communicate with the backend server using JSON over restful web services

  • Secure your single page application using token-based authentication

  • In Detail

    Knockout is an open source JavaScript library that lets you develop rich, interactive, and modular web applications. It reduces the complexities of JavaScript and HTML development by following the Model-View-View Model (MVVM) design pattern. It allows you to efficiently develop highly scalable, testable, and maintainable web applications that are rich and interactive. Knockout is a pure JavaScript library and supports all major browsers.

    This book starts with introducing 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 your way to develop a customer banking portal, which demonstrates the use of knockout.js with components such as navigation bars, tabs, carousel, master details view, panels, forms, wizards, and modal dialogs. You will also discover 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 using the Google maps api with knockout.js.

    By working along with the examples, this book will not only leave you with the basic understanding of knockout.js fundamentals but you will also have a web application ready instantly.

    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.

    Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

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