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

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...