app.js

// /src/app.js

// Import jQuery
import $ from 'jquery';
import _ from 'underscore';
import Task from './models/task';
import TaskList from './collections/task_list';

var taskData = [{
  title: "Create a model",
  completed: true
},
{
  title: "Create a collection",
  completed: false
}];
var taskList = new TaskList(taskData);

/*** Rendering Functions ***/
// render one task using an underscore template
var render = function(task) {
  var templateText = $('#taskItemTemplate').html();
  var templateObject = _.template(templateText);

  var compiledHTML = $(templateObject(task.toJSON()));

  $('.todo-items').append(compiledHTML);

  compiledHTML.find("button.alert").click({task: task}, function(params) {
    taskList.remove(params.data.task);
  });
};

// render the entire taskList using the above render function
var renderList = function(taskList) {
  // Clear the unordered list
  $('.todo-items').empty();
  // Iterate through the list rendering each Task
  taskList.each(function(task) {
    render(task);
    $('main li.task-item:last').find('button.alert').click ({taskCid: task.cid}, function(params) {
      taskList.remove(params.data.taskCid);
    });
  });
};
/*** End Rendering Functions ***/



$(document).ready(function() {
  
  $('#add-task').click( function() {
    // Create a new Task
    var task = new Task( readNewTaskForm() );
    // re-render the list
    render(task);
});

  renderList(taskList);
});

  var readNewTaskForm = function() {
  // Get the values from the fields
  var title = $('#title').val();
  $('#title').val('');
  var description = $('#description').val();
  $('#description').val('');
  var completed = $('#completed-checkbox').is(":checked");
  $('#completed-checkbox').prop('checked', false);

  return {
    title: title,
    description: description,
    completed: completed
  };
};