The sixth feature of our to-do application is to give the users the ability to view the number of total and completed tasks. We will do this by displaying this information after the tasks table. We will let the user know if no tasks exist in the task list, otherwise, we will display the number of total and competed tasks. This feature will demonstrate the built-in array methods, utility methods provided by Knockout, and computed observables.
Let's get started by displaying the total number of tasks in our tasks list. We can use the length property of the observable array to get the number of items it holds. We can access the length property of our tasks array like this:
ToDoList.tasks().length;
We can display the total number of tasks in our view by using the preceding code. To do this, add a row below the tasks table. Then, use the text data binding with a span element to display the total number of tasks. Your code should look similar to this...