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();

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 will call our addTask method. Create the addTask method and add the following line of code:

tasks.push({name: task.name(), description: task.description()});

The preceding line of code will create a new task and add it to the end of our tasks array. Don't forget to also add code to display the new task on the console. This will help us debug if our code is not working.

With the model and behavior method defined, we need to expose them publicly so that they can be used from our view. To do this, add these lines of code to the return statement of the module. Your return statement should look similar to this:

return {
  /* add members that will be exposed publicly */
  tasks: tasks,
  task: task,
  addTask: addTask
};

One last thing before we start on the view is to activate Knockout. Call the applyBindings method of Knockout in the init method of our module:

var init = function () {
  /* add code to initialize this module */
  ko.applyBindings(ToDoList);
};

The init method gets executed when the DOM is ready. This is because we pass the init method to jQuery with the $(init); call.

Now that our module is now ready, let's start on our view. The first step is to capture the user input. We do this by using two HTML inputs: one for the name of the task and another for the description. The HTML inputs are bound to our model by the data-bind construct. We also add a button with the add label. The click of the button is bound to our addTask method. The HTML should look similar to this:

<div class="row">
  <div class="col-md-12">
    Name <input type="text" data-bind="value: 
    ToDoList.task.name" />
    Description <input type="text" data-bind="value: ToDoList.task.description" />
    <button class="btn btn-primary" data-bind="click: ToDoList.addTask">Add</button>
  </div>
</div>

Try running the application in your browser. You should be able to add a task and see the newly created task in the console. Add code to clear the inputs once the new task is added to the tasks array. This is done by clearing the values of name and description observables from the task object. Do this by creating a clearTask method and calling it from the addTask method after the new task is pushed to the tasks array. Your clearTask method should look similar to this:

/* method to clear the task */
var clearTask = function () {
  task.name(null);
  task.description(null);
};

Let's now start on the second part of this feature, that is, to view the list of task. We will use the HTML table and foreach binding. Add the following code to the view after the code to capture the inputs and the add button:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: ToDoList.tasks">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: description"></td>
    </tr>
  </tbody>
</table>

We have implemented the first feature of our to-do list application. Open the application in the browser and try adding some tasks. It should look similar to this:

We have reached our first checkpoint. The code for this checkpoint can be found at chapter2\checkpoint1.