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

Cancel updating the personal information


We gave our users the ability to edit their personal information in the previous user story. Once the users start editing, they do not have a way to cancel if they don't want to go ahead with the changes. In this user story, we will give our users the ability to cancel editing the personal information form. The requirement of the user story is to provide a button, with a label Cancel, in the edit mode. Clicking the Cancel button should revert any changes made to the form fields and take the form out of the edit mode. The user would also like to be informed that the edit was cancelled and any change to personal information was not saved.

Let's start by adding the Cancel button to the view. Add a button under the Submit button of the personal form. Give the button a label of Cancel. The button should only be displayed if the personal information form is in the edit mode. Add a visible binding to the button to make it appear only in the edit mode, similar...