Book Image

KnockoutJS by Example

By : Adnan Jaswal
Book Image

KnockoutJS by Example

By: Adnan Jaswal

Overview of this book

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.
Table of Contents (17 chapters)
KnockoutJS by Example
Credits
About the Author
Acknowledgment
About the Reviewers
www.PacktPub.com
Preface
Index

Capturing credit card details


The forth feature of our customer registration form application is to capture the customer's credit card details. For the credit card, we will capture the name on the card, card number, and card expiry date. We will let our customer register more than one credit cards and limit it to a maximum of three.

Let's start by creating the credit card attribute in our customer model. This attribute will hold the details of the credit cards. This attribute will be an observable array as we need to allow our customers to register multiple credit cards. Add the following code to the customer model:

creditCards: ko.observableArray()

We need to add one credit card to our array initially so that it appears on the view. To do this, we will add a method to our module that will add a credit card and then call it from our init method. The add credit card method should look similar to this:

/* method to add credit card to the credit cards array */
var addCreditCard = function () {...