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

Displaying the logged in user


In this user story, we will display the username of the logged in user on the screen. To implement this user story, we will take the following steps:

  • Add a method to the authenticator module to extract and return the username from the JWT

  • Update the view to display the logged in user in the navigation bar

Let's start by adding a method to the authenticator module. We will name this method loggedInUser and make it a pure observable so that it can be used in the view. We will extract the username form the JWT we received from the server. Recall the JWT structure described earlier in this chapter. The JWT is base64 encoded with dot (.) as the separator between head, body, and signature. To retrieve the username, we will split the token and then base64 decode the body. The body of the token contains the userName attribute, which the method should return. Our implementation of the pure computed observable looks similar to this:

/* return the user name of the logged in...