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

Completing a task


The third feature of our to-do application is to give the users the ability to complete a task. We will do this by adding a Complete button for each task in the Actions column we created while implementing the delete task feature. The task will be marked as complete by highlighting the row of the tasks that are complete. The Complete button will not appear for the tasks that have been completed.

Let's start by adding a new attribute to the task in our tasks array that tracks whether the task is complete or not. We will call this attribute, status. The status will be set to new for the newly created tasks and complete for the completed tasks. Add the status attribute to the task we create and push to the tasks array. The code should look similar to this:

//add the task to the tasks array
tasks.push({
  name: task.name(),
  description: task.description(),
  status: 'new'
});

Now let's add a button to our Actions column to change the status of a task to complete. This button...