Adding a Collection to TaskListView

app.js

import $ from 'jquery';

import TaskList from 'app/collections/task_list';
import TaskListView from 'app/views/task_list_view';

var taskData = [
  {
    title: 'Mow the lawn',
    description: 'Must be finished before BBQ on Sat afternoon'
  }, {
    title: 'Go to the Bank',
    description: 'Need to make a transfer'
  }, {
    title: 'Tune the Piano',
    description: 'High C is missing or something???'
  }
];

$(document).ready(function() {
  var taskList = new TaskList(taskData);
  var application = new TaskListView({
    el: $('#application'),
    model: taskList
  });
  application.render();
});

task_list.js

// app/collections/task_list.js
import Backbone from 'backbone';

import Task from 'app/models/task';

var TaskList = Backbone.Collection.extend({
  model: Task
});

export default TaskList;

task_list_view.js

import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

import Task from 'app/models/task';
import TaskView from 'app/views/task_view';

var TaskListView = Backbone.View.extend({
  initialize: function(options) {
    // 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');

    // We'll keep track of a list of task models and a list
    // of task views.
    this.cardList = [];

    // Process each task
    this.model.forEach(function(task) {
      this.addTask(task);
    }, 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: {
    'submit .new-task': 'createTask',
    'click .clear-button': 'clearInput'
  },

  createTask: function(event) {
    // Normally a form submission will refresh the page.
    // Suppress that behavior.
    event.preventDefault();

    // Get the input data from the form and turn it into a task
    var rawTask = this.getInput();
    var task = this.model.add(rawTask);

    // Create a card
    this.addTask(task);

    // Re-render the whole list, now including the new card
    this.render();

    // Clear the input form so the user can add another task
    this.clearInput();
  },

  // Create a card for a task and add that card to our list of cards.
  addTask: function(task) {
    // Create a card for the new task
    var card = new TaskView({
      model: task,
      template: this.taskTemplate
    });

    // Add the card to our card list
    this.cardList.push(card);
  },

  // Build a raw task (not a model) from the data entered in the .new-task form
  getInput: function() {
    var task = {
      title: this.input.title.val(),
      description: this.input.description.val()
    };
    return task;
  },

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

export default TaskListView;