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 list of products


The first feature of this chapter is to display the list of products to the user. To implement this feature, we will:

  • Create a new module that will serve as the client for our CRUD operations

  • Update the products client module to add a method to retrieve products from the server

  • Add the product model to the products grid module

  • Update the products grid module to retrieve the list of products from the server

  • Update the view to display the products

Let's get started by creating the client module for CRUD operations. Create a new JavaScript file called productsclient.js and add a blank module to it. The module should expect a base URL. This is the URL to the server. Add a method to the module to send a GET request to the server to retrieve the list of products. The method should expect a method that will be called on successful retrieval of data. Our implementation looks similar to this:

/* Module for products grid client */
var ProductsClient= function (url) {
  
 ...