Todo app task.js explanation

todo_taskjs.md

#task.js

Here we are building the model objects for tasks, which can talk to the TaskView objects, but not directly to the DOM. They talk to the database for us.

function Task(data) {
  console.log('model created with data:', data);
  this.id          = data.id;
  this.completed   = data.completed;
  this.description = data.description;
}

Here is our constructor function. We pass it data from the click event when it is constructed (more on this when I get to main.js)

The Task object has three attribtues, which are set by the data received from it's creation Event. These are it's id, completed boolean, and the description of the task.

###prototype

Task.prototype.toggleCompleted = function(){
  console.log('-> model:toggleCompleted', this);

  this.completed = !this.completed; // update model!
  this.update(); // persist!
}

This method's purpose is to toggle the completed boolean on the Task object. We set the completed attribute equal to the opposite of whatever it currently is.

Next, we call the completed method on the object; that method's explanation is coming shortly.

Task.prototype.create = function() {
  console.log('!(AJAX) model:create initiated');
  $.ajax({
    url:      "/tasks",
    type:     "POST",
    dataType: "json",
    context:  this, // this sets context in done to the object
    data: {
      task: { // nested for rails strong params (white-listing)!
        description: this.description,
        completed:   this.completed
      }
    }
  }).done(function(data){
    // give the model the data from the server (id, etc.)
    this.id        = data.id;
    this.completed = data.completed;
    console.log('!(AJAX) model:create complete', data, this);
  });
}

Damn, this is long. Why is it long? Cause it has a straight AJAX post request, yo.

We are pretty familiar with these requests by now. It's important to take note of the context parameter here. We set it to this, so that the context of the deferred object returned by the ajax call will remain the object itself. MINDBLOWN

Also, we nest the data within a hash called 'task', this is so rails' strong parameters will get what is expected. Then we simply store the description and completed parameters from the object in that hash to be sent off in the post request.

Our done function receives some data back from the successful request; important here is that the object's id attribute is matched with the ActiveRecord serialized key of the object on the database mindblown By default, completed is set to 'false'.

Task.prototype.update = function() {
  console.log('!(AJAX) model:update initiated');
  $.ajax({
    url:      "/tasks/" + this.id,
    type:     "PATCH",
    dataType: "json",
    context:  this, // this sets context in done to the object
    data: {
      task: { // nested for rails strong params (white-listing)!
        description: this.description,
        completed:   this.completed
      }
    }
  }).done(function(data){
    console.log('!(AJAX) model:update complete', data, this);
  });
}

Here is our update function, used for when we toggle the 'completed' boolean of a Task.

We make an ajax patch request, once again setting the context of the impending deferred object to this as it stands now, or the object itself. Then we pass the data in the same way as before, nested correctly for the parameters that rails expects.

Our done function simply logs the update; we don't have any reason to alter the object's 'id' or 'completed' attributes.

Task.prototype.destroy = function(){
  console.log('!(AJAX) model:destroy initiated');
  $.ajax({
    url:      "/tasks/" + this.id,
    type:     "DELETE",
    dataType: "json",
    context:  this // this sets context in done to the object
  }).done(function(data){
    console.log('!(AJAX) model:destroy complete', data, this);
  });
}

Finally, we have our 'destroy' function, for getting rid of a task in the database.

We simply make an ajax delete request. The one thing of note here is that we set the route by grabbing the object's 'id' attribute and using some sting concationacanadtitatccation.