2. Creating a To-do List Application | KnockoutJS by Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

KnockoutJS by Example

By : Adnan Jaswal

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

License

Free Chapter

1. Getting Started

1. Getting Started

Understanding the MVVM design pattern

The key features of Knockout

Understanding the module pattern and its use with Knockout

Building the address book application

Resources

Summary

2. Creating a To-do List Application

2. Creating a To-do List Application

Creating the skeleton

Adding and viewing tasks

Deleting a task

Completing a task

Setting priority for a task

Sorting tasks by priority and name

Viewing the number of total and completed tasks

Summary

3. Creating an Online Customer Registration Form

3. Creating an Online Customer Registration Form

Getting started

Capturing personal information

Capturing contact details

Capturing residential and postal addresses

Capturing credit card details

Capturing interests

Clearing the registration form

Summary

4. Adding Validation to the Customer Registration Form

4. Adding Validation to the Customer Registration Form

Validating the model using Knockout extenders

Validating model using the Knockout validation plugin

Summary

5. Creating a Customer Banking Portal

5. Creating a Customer Banking Portal

Creating the skeleton

Navigating between application features

Viewing contact details and information about the bank

Viewing accounts

Viewing transactions for an account

Viewing personal information

Summary

6. Enhancing the Customer Banking Portal

6. Enhancing the Customer Banking Portal

Updating personal information

Cancel updating the personal information

Validating personal information

Transferring funds between accounts

Summary

7. Securing the Customer Banking Portal

7. Securing the Customer Banking Portal

Authentication mechanisms

Logging in to the application

Validating the login form

Handling the authentication error

Displaying the logged in user

Logging out of the application

Summary

8. Building an Editable Products Grid with CRUD Operations

8. Building an Editable Products Grid with CRUD Operations

A word on REST

Installing and running the sever

Creating the skeleton

Displaying the list of products

Deleting a product

Adding a product

Updating a product

Summary

9. Using Google Maps APIs with Knockout

9. Using Google Maps APIs with Knockout

Creating the skeleton

Capturing address using autocomplete

Displaying address details

Rendering the map

Placing markers on the map

Displaying route between markers

Summary

Index

Index

Adding and viewing tasks

The first feature of our to-do application is to give the users the ability to create and view tasks. The information we need to capture about a task is the name and description. We need to add this as a model to our ToDoList module. Add the task model. It should look similar to this:

/* the task */
var task = {
  name: ko.observable(),
  description: ko.observable()
};

We need to capture the tasks in an array. Add the tasks array to the module. It should look similar to this:

/* array of tasks */
var tasks = ko.observableArray();

Tip

Observable array is an observable, which holds a JavaScript array object as the underlying data structure. You can retrieve the JavaScript array object by invoking the observable array as a function, similar to normal observables.

Now that we have defined our model, let's create an add task method in our module. This method should create a new task, based on the name and description from the task object, and add it to our tasks array. We...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

KnockoutJS by Example

Search

Your notes and bookmarks