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

Viewing contact details and information about the bank


The second user story states that the application should provide the ability to the user to view contact details and information about the bank. We have already developed the about and contact details pages as part of the first story. All we have to do now is to add content to the relevant sections.

The requirements for the contact details, specified by the client, are relatively straightforward. We need to display contact details for general enquires and lost or damaged card. We will use the Bootstrap panel to display this information. Open the view and create a div element for the panel to display the contact details for general enquiry. This div element goes in the section we created for the contact page earlier that contained the place holder text. Add the panel heading and body by using the panel-heading and panel-body CSS styles. Add contact details; you can make up the phone numbers and operating hours. Surround the panel with...