CheezItMan · November 28, 2016 22:10
diff --git a/app.js b/app.js
 import $ from 'jquery';

 import Task from 'app/models/task';
 import TaskView from 'app/views/task_view';
 import TaskListView from 'app/views/task_list_view';
 import _ from 'underscore';

 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 = [];

  for (var i = 0; i < taskData.length; i++) {
        // Create each task with a title & description
    var task = new Task(taskData[i]);
    taskList.push(task);
  }

  var template = _.template($('#task-template').html());

  var myTaskListView = new TaskListView({taskData: taskList, template: template, el: $('.task-list')});
  myTaskListView.render();
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <title>Task List</title>
  <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 class="row">
    <section class="small-12 columns">
      <h1 class="title">Task List</h1>
    </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>
diff --git a/task.js b/task.js

 import Backbone from 'backbone';

 var Task = Backbone.Model.extend( {
  defaults: {
    title: "Something to do",
    description: "",
    completed: false
  }
 });

 export default Task;
diff --git a/task_list_view.js b/task_list_view.js

 // 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) {
    this.taskTemplate = _.template($('#task-template').html());
    this.taskData = options.taskData;

    this.taskViews = [];
    this.taskData.forEach(function(task) {
      var taskView = new TaskView({
          task: task,
          template: this.taskTemplate
      });
      this.taskViews.push(taskView);
    }, this);

  },
  render: function() {
    var that = this;
    this.taskViews.forEach(function(taskView) {
      that.$el.append(taskView.render().el);
    });
    return this;
  }
 });

 export default TaskListView;
diff --git a/task_view.js b/task_view.js

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

 import Task from 'app/models/task';

 var TaskView = Backbone.View.extend({
  initialize: function(options) {
    this.task = options.task;
    this.template = options.template;
  },
  render: function() {
           // Notice that we've added .attributes
   var html = this.template({task: this.task.attributes});
   this.$el.html(html);

   // Enable chained calls
   return this;
 },
 getInput: function() {
  var task = new Task({
    title: this.input.title.val(),
    description: this.input.description.val()
  });
  return task;
 }

 });

 export default TaskView;
	import $ from 'jquery';

	import Task from 'app/models/task';
	import TaskView from 'app/views/task_view';
	import TaskListView from 'app/views/task_list_view';
	import _ from 'underscore';

	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 = [];

	for (var i = 0; i < taskData.length; i++) {
	// Create each task with a title & description
	var task = new Task(taskData[i]);
	taskList.push(task);
	}

	var template = _.template($('#task-template').html());

	var myTaskListView = new TaskListView({taskData: taskList, template: template, el: $('.task-list')});
	myTaskListView.render();
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Task List</title>
	<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 class="row">
	<section class="small-12 columns">
	<h1 class="title">Task List</h1>
	</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>

	import Backbone from 'backbone';

	var Task = Backbone.Model.extend( {
	defaults: {
	title: "Something to do",
	description: "",
	completed: false
	}
	});

	export default Task;

	// 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) {
	this.taskTemplate = _.template($('#task-template').html());
	this.taskData = options.taskData;

	this.taskViews = [];
	this.taskData.forEach(function(task) {
	var taskView = new TaskView({
	task: task,
	template: this.taskTemplate
	});
	this.taskViews.push(taskView);
	}, this);

	},
	render: function() {
	var that = this;
	this.taskViews.forEach(function(taskView) {
	that.$el.append(taskView.render().el);
	});
	return this;
	}
	});

	export default TaskListView;