droberts-sea/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
  <link rel="stylesheet" href="styles/index.css">
</head>
<body>
  <main id="application" class="row">
    <section class="small-12 columns">
      <h1>Task List</h1>

      <form class="row new-task">
        <div class="small-12 large-4 columns">
          <label for="title">Title</label>
          <input type="text" name="title"></input>
        </div>
        <div class="small-12 large-4 columns">
          <label for="description">Description</label>
          <input type="text" name="description"></input>
        </div>
        <div class="small-12 large-4 columns">
          <!-- Placeholder for vertical alignment -->
          <label class="show-for-large">&nbsp;</label>
          <button type="submit" class="success button">Add Task</button>
          <button type="button" class="warning button clear-button">Clear</button>
        </div>
      </form>
    </section>

    <ul class="task-list small-12 large-6 columns end">
    </ul>
  </main>

  <script type="text/template" id="task-template">
    <li class="task">
      <h2>
        <%- task.title %>
      </h2>
      <p>
        <%- task.description %>
      </p>
    </li>
  </script>

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

## task_list_view.js
// app/views/task_list_view.js
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

import TaskView from 'app/views/task_view';

var TaskListView = Backbone.View.extend({
  initialize: function(options) {
    // Store a the full list of tasks
    this.taskData = options.taskData;

    // Compile a template to be shared between the individual tasks
    this.taskTemplate = _.template($('#task-template').html());

    // Keep track of the <ul> element
    this.listElement = this.$('.task-list');

    // Create a TaskView for each task
    this.cardList = [];
    this.taskData.forEach(function(task) {
      var card = new TaskView({
        task: task,
        template: this.taskTemplate
      });
      this.cardList.push(card);
    }, this); // bind `this` so it's available inside forEach

    // Keep track of our form input fields
    this.input = {
      title: this.$('.new-task input[name="title"]'),
      description: this.$('.new-task input[name="description"]')
    };
  },

  render: function() {
    // Make sure the list in the DOM is empty
    // before we start appending items
    this.listElement.empty();

    // Loop through the data assigned to this view
    this.cardList.forEach(function(card) {
      // Cause the task to render
      card.render();

      // Add that HTML to our task list
      this.listElement.append(card.$el);
    }, this);

    return this; // enable chained calls
  },

  events: {
    'click .clear-button': 'clearInput'
  },

  clearInput: function(event) {
    this.input.title.val('');
    this.input.description.val('');
  }
});

export default TaskListView;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
	<link rel="stylesheet" href="styles/index.css">
	</head>
	<body>
	<main id="application" class="row">
	<section class="small-12 columns">
	<h1>Task List</h1>

	<form class="row new-task">
	<div class="small-12 large-4 columns">
	<label for="title">Title</label>
	<input type="text" name="title"></input>
	</div>
	<div class="small-12 large-4 columns">
	<label for="description">Description</label>
	<input type="text" name="description"></input>
	</div>
	<div class="small-12 large-4 columns">
	<!-- Placeholder for vertical alignment -->
	<label class="show-for-large"> </label>
	<button type="submit" class="success button">Add Task</button>
	<button type="button" class="warning button clear-button">Clear</button>
	</div>
	</form>
	</section>

	<ul class="task-list small-12 large-6 columns end">
	</ul>
	</main>

	<script type="text/template" id="task-template">
	<li class="task">
	<h2>
	<%- task.title %>
	</h2>
	<p>
	<%- task.description %>
	</p>
	</li>
	</script>

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

	import TaskView from 'app/views/task_view';

	var TaskListView = Backbone.View.extend({
	initialize: function(options) {
	// Store a the full list of tasks
	this.taskData = options.taskData;

	// Compile a template to be shared between the individual tasks
	this.taskTemplate = _.template($('#task-template').html());

	// Keep track of the <ul> element
	this.listElement = this.$('.task-list');

	// Create a TaskView for each task
	this.cardList = [];
	this.taskData.forEach(function(task) {
	var card = new TaskView({
	task: task,
	template: this.taskTemplate
	});
	this.cardList.push(card);
	}, this); // bind `this` so it's available inside forEach

	// Keep track of our form input fields
	this.input = {
	title: this.$('.new-task input[name="title"]'),
	description: this.$('.new-task input[name="description"]')
	};
	},

	render: function() {
	// Make sure the list in the DOM is empty
	// before we start appending items
	this.listElement.empty();

	// Loop through the data assigned to this view
	this.cardList.forEach(function(card) {
	// Cause the task to render
	card.render();

	// Add that HTML to our task list
	this.listElement.append(card.$el);
	}, this);

	return this; // enable chained calls
	},

	events: {
	'click .clear-button': 'clearInput'
	},

	clearInput: function(event) {
	this.input.title.val('');
	this.input.description.val('');
	}
	});

	export default TaskListView;