task.js

// app/models/task.js
import Backbone from 'backbone';

var Task = Backbone.Model.extend({
  defaults: {
    title: "Unknown Task",
    description: "placeholder description"
  },
  initialize: function() {
    console.log("Created new task with title " + this.title);
  }
});

export default Task;

task_list_view.js

// app/views/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.modelList = [];
    this.cardList = [];

    // Process each task
    options.taskData.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 task = this.getInput();

    // 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();
  },

  // Turn a raw task into a Task model, add it to our list of tasks,
  //  create a card for it, and add that card to our list of cards.
  addTask: function(rawTask) {
    // Create a Task from this raw data
    var task = new Task(rawTask);

    // Add the new task model to our list
    this.modelList.push(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;

task_view.js

// app/views/task_view.js
import Backbone from 'backbone';

var TaskView = Backbone.View.extend({
  initialize: function(options) {
    this.template = options.template;
  },

  render: function() {
    var html = this.template({task: this.model.attributes})
    this.$el.html(html);

    // Enable chained calls
    return this;
  }
});

export default TaskView;