April 24, 2017 05:59
diff --git a/app.js b/app.js
 // src/app.js
 import $ from 'jquery';
 import _ from 'underscore';

 import Task from 'app/models/task';
 import TaskList from 'app/collections/task_list';

 var taskData = [ {
  title: "Study JavaScript",
  completed: true
 },
 {
  title: "Learn Backbone Collections",
  completed: false
 },
 {
  title: "Take out the trash",
  completed: false
 }];

 var taskList = new TaskList(taskData);

 $(document).ready(function() {
  $('#new-task').on("click", function() {
    if ( $('#title').val() !== "" ) {
      var task = new Task({title: $('#title').val(), completed: $('#completed').val() === "on"  });

      taskList.add(task);
      $('#title').val("");
      $('#completed').val("off");
      console.log(taskList);
    }
  });

  // Select the template using jQuery
  var template_text = $('#taskItemTemplate').html();
  // Get an underscore template object
  var template = _.template(template_text);

  taskList.on("update", function() {
    $('main').empty();
    taskList.each(function(task) {
      $('main').append(template(task.toJSON()));
      $('main section.task-item:last').find('button.delete').click ({taskCid: task.cid}, function(params) {
          taskList.remove(params.data.taskCid);
      });
      $('main section.task-item:last').find('button.toggle').click ({taskCid: task.cid}, function(params) {
          var task = taskList.get(params.data.taskCid);
          task.set("completed", !task.get("completed"));
          taskList.trigger("update");
      });
    });
  });

  taskList.trigger("update");
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  <main>  </main>
  <section class="new-task">
    <form>
      <div>
        <label for="title">Title:</label>
        <input name="title" id="title">
      </div>
      <div>
        <label for="completed">Completed:</label>
        <input type="checkbox" id="completed" name="completed">
      </div>
      <div>
        <button type="button" id="new-task">
          New Task
        </button>
      </div>
    </form>
  </section>

  <script id="taskItemTemplate" type="text/template">
    <section class="task-item">
      <h1><strong>Title:</strong> <%= title %></h1>
      <h3><strong>Completed:</strong> <%= completed %></h3>
      <button class="toggle">Toggle <%= completed ? "Incomplete" : "Complete"  %></button>
      <button class="delete">Delete</button>

    </section>
  </script>

  <script src="/app.bundle.js" charset="utf-8"></script>
 </body>
 </html>
	// src/app.js
	import $ from 'jquery';
	import _ from 'underscore';

	import Task from 'app/models/task';
	import TaskList from 'app/collections/task_list';

	var taskData = [ {
	title: "Study JavaScript",
	completed: true
	},
	{
	title: "Learn Backbone Collections",
	completed: false
	},
	{
	title: "Take out the trash",
	completed: false
	}];

	var taskList = new TaskList(taskData);

	$(document).ready(function() {
	$('#new-task').on("click", function() {
	if ( $('#title').val() !== "" ) {
	var task = new Task({title: $('#title').val(), completed: $('#completed').val() === "on" });

	taskList.add(task);
	$('#title').val("");
	$('#completed').val("off");
	console.log(taskList);
	}
	});

	// Select the template using jQuery
	var template_text = $('#taskItemTemplate').html();
	// Get an underscore template object
	var template = _.template(template_text);

	taskList.on("update", function() {
	$('main').empty();
	taskList.each(function(task) {
	$('main').append(template(task.toJSON()));
	$('main section.task-item:last').find('button.delete').click ({taskCid: task.cid}, function(params) {
	taskList.remove(params.data.taskCid);
	});
	$('main section.task-item:last').find('button.toggle').click ({taskCid: task.cid}, function(params) {
	var task = taskList.get(params.data.taskCid);
	task.set("completed", !task.get("completed"));
	taskList.trigger("update");
	});
	});
	});

	taskList.trigger("update");
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<main> </main>
	<section class="new-task">
	<form>
	<div>
	<label for="title">Title:</label>
	<input name="title" id="title">
	</div>
	<div>
	<label for="completed">Completed:</label>
	<input type="checkbox" id="completed" name="completed">
	</div>
	<div>
	<button type="button" id="new-task">
	New Task
	</button>
	</div>
	</form>
	</section>

	<script id="taskItemTemplate" type="text/template">
	<section class="task-item">
	<h1><strong>Title:</strong> <%= title %></h1>
	<h3><strong>Completed:</strong> <%= completed %></h3>
	<button class="toggle">Toggle <%= completed ? "Incomplete" : "Complete" %></button>
	<button class="delete">Delete</button>

	</section>
	</script>

	<script src="/app.bundle.js" charset="utf-8"></script>
	</body>
	</html>