KnockoutJS by Example

Adnan Jaswal

• Publisher: Packt Publishing
• Year: 2015
• eBook ISBN: 9781785288548
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

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

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.

KnockoutJS by Example

---

Table of Contents

KnockoutJS by Example

Credits

About the Author

Acknowledgment

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

License

Downloading the example code

Errata

Piracy

Questions

1. Getting Started

Understanding the MVVM design pattern

The model

The view model

The view

The key features of Knockout

Declarative bindings

Automatic UI refresh

Dependency tracking

Templating

Understanding the module pattern and its use with Knockout

The concept

Public and private members

Initializing the module

Using the module with view model

Building the address book application

A word on the development environment

Downloading the libraries

Creating the skeleton

Adding the application features

Capturing and storing contacts

Displaying contacts

Adding style to your application with Bootstrap

Resources

Summary

2. Creating a To-do List Application

Creating the skeleton

Adding and viewing tasks

Deleting a task

Completing a task

Setting priority for a task

Sorting tasks by priority and name

Viewing the number of total and completed tasks

Summary

3. Creating an Online Customer Registration Form

Getting started

Capturing personal information

Capturing contact details

Capturing residential and postal addresses

Capturing credit card details

Capturing interests

Clearing the registration form

Summary

4. Adding Validation to the Customer Registration Form

Validating the model using Knockout extenders

Validating model using the Knockout validation plugin

Getting started

The basics

Validating personal information

Validating contact details

Validating address details

Validating credit cards

Summary

5. Creating a Customer Banking Portal

Creating the skeleton

Navigating between application features

Viewing contact details and information about the bank

Viewing accounts

Viewing transactions for an account

Viewing personal information

Summary

6. Enhancing the Customer Banking Portal

Updating personal information

Cancel updating the personal information

Validating personal information

Transferring funds between accounts

Creating the Transfers tab

Creating the wizard component

Adding functionality to the wizard

Summary

7. Securing the Customer Banking Portal

Authentication mechanisms

Basics of the token-based authentication

Token versus session in cookies

JSON Web Token

Logging in to the application

Creating the authentication module

Creating the login screen

Refactoring the BankPortal module

Testing the application using different user accounts

Validating the login form

Handling the authentication error

Displaying the logged in user

Logging out of the application

Summary

8. Building an Editable Products Grid with CRUD Operations

A word on REST

Installing and running the sever

Creating the skeleton

Displaying the list of products

Deleting a product

Adding a product

Updating a product

Summary

9. Using Google Maps APIs with Knockout

Creating the skeleton

Capturing address using autocomplete

Displaying address details

Rendering the map

Placing markers on the map

Displaying route between markers

Summary

Index

KnockoutJS by Example

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2015

Production reference: 1280915

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78528-854-8

www.packtpub.com

Credits

Author

Adnan Jaswal

Reviewers

Taswar Bhatti

Scott Durow

Magesh Kuppan

Commissioning Editor

Sarah Crofton

Acquisition Editor

Vivek Anantharaman

Content Development Editor

Divij Kotian

Technical Editor

Shivani Kiran Mistry

Copy Editor

Swati Priya

Project Coordinator

Nikhil Nair

Proofreader

Safis Editing

Indexer

Monica Ajmera Mehta

Graphics

Disha Haria

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Author

Adnan Jaswal is technologist with vast knowledge and experience in technology consultancy, solution architecture, and software development. He has designed and developed software for government, education, financial, cyber security, logistics, and aviation industries. He believes in the digital revolution and the power it possesses to change the way people and businesses interact with technology. He is passionate about JavaScript technologies and views them as an enabler of digital change.

He has worked for companies such as CA Technologies and Object Consulting. He currently works, as a manager, for one of the big four professional services networks. His role involves technology consulting, architecting, leading teams, developing software, and helping clients respond to digital disruption.

He lives in Melbourne, Australia, with his wife and two children. He can be found on LinkedIn at https://www.linkedin.com/in/adnanjaswal.

Acknowledgment

I would like to thank the team of editors, proof readers, and designers who contributed to the quality of this book. My special thanks goes to the technical reviewers of this book for identifying mistakes and suggesting improvements.

To my teachers and mentors, thank you for contributing to my knowledge and experience. I would also like to extent my appreciation to all my colleagues and peers. I enjoy our discussions and collaborations, and they have helped me with the content of this book.

Special thanks also goes to all my family and friends for sharing my happiness and supporting me when I started this project.

To my beautiful children, Heba and Zaki, thank you for the understanding on those days when I was away writing this book. You both bring me so much joy and make me smile every single day. You missed out on daddy time while I was writing this book and I will try my best to make it up.

Finally, to my lovely wife Sadia, thank you for your love and support as I fit the writing schedule into our already overly busy life. You took on additional duties every weekend I had to go write this book. The hard work you put in and the motivation you have is my inspiration. This book has been a long journey for all of us and I could not have done it without you.

About the Reviewers

Taswar Bhatti is a system architect at Gemalto, an international digital security company in Ottawa, Canada. He has been working in the software industry for more than 15 years. He focuses on building secure, highly-distributed, and scalable solutions.

He is also the author of Instant Automapper, Packt Publishing. He regularly speaks at meetups and code camps, and blogs on http://taswar.zeytinsoft.com. You can follow him on Twitter @taswarbhatti.

I would like to thank my wife, Nilay Ertemur Bhatti, and my children, Onur and Sevin Bhatti, for all the love and support.

Scott Durow is an experienced software architect and technologist with a passion for enabling business transformation through the Microsoft tech...

Table of contents

• KnockoutJS by Example