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

var render = function(task) {
  // Select the template using jQuery
  var template_text = $('#taskItemTemplate').html();

  //console.log(template_text);
  // Get an underscore template object
  var templateObject = _.template(template_text);

  // Use the underscore template function to compile the
  // template and data into raw html.
  var compiledHTML = templateObject(task.toJSON());

  // append the html to the unordered list.
  $('.todo-items').append(compiledHTML);
};

var renderList = function(taskList) {
  // Clear the unordered list
  $('.todo-items').empty();
  // Iterate through the list rendering each Task
  taskList.each(function(task) {
    render(task);
  });
};

$(document).ready(function() {
  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
};
  
$('#add-task').click( function() {

    // Create a new Task
    var task = new Task( readNewTaskForm() );

    // Add the Task to the list
    taskList.add(task);
    // Clear the Unordered list
    $('.todo-items').empty();

    // re-render the list
    renderList(taskList);
  });
});