droberts-sea · November 29, 2016 04:29 · droberts-sea · Nov 29, 2016
diff --git a/index.html b/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 row">
        <div class="small-12 large-10 columns">
          <h2>
            <% if (task.complete) { %>
              <strike>
            <% } %>
            <%- task.title %>
            <% if (task.complete) { %>
              </strike>
            <% } %>
          </h2>
          <p>
            <%- task.description %>
          </p>
        </div>
        <button class="button small-12 large-2 columns complete-button">
          Mark <%= task.complete ? "Incomplete" : "Complete" %>
        </button>
      </li>
    </script>

    <script src="/app.bundle.js" charset="utf-8"></script>
  </body>
  </html>
diff --git a/task.js b/task.js
 // src/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);
  },

  // If this task is incomplete, mark it complete. If it's
  // complete, mark it incomplete.
  // Just like in Ruby, the Model is a great place to stuff
  // all your complex business logic.
  toggleComplete: function() {
    var newStatus = !this.get('complete');
    this.set('complete', newStatus);
  }
 });

 export default Task;
diff --git a/task_view.js b/task_view.js
 import Backbone from 'backbone';

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

    // Listen to our model, and re-render whenever it changes.
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    var html = this.template({task: this.model.attributes})
    this.$el.html(html);
    
    // Re-bind events, since our HTML is all brand new.
    this.delegateEvents();

    // Enable chained calls
    return this;
  },

  events: {
    "click .complete-button": "toggleComplete"
    // For some reason only DOM events go here.
  },

  // This wrapper is a bit of a bummer, but it's a must.
  // Backbone view events must be handled by a function
  // in that view.
  toggleComplete: function() {
    this.model.toggleComplete();

    // Notice that we don't need to call render. By watching
    // the model for changes, we get this functionality for
    // free! Very nice when you've got many ways to mess
    // with a model.
  }
 });

 export default TaskView;
	<!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 row">
	<div class="small-12 large-10 columns">
	<h2>
	<% if (task.complete) { %>
	<strike>
	<% } %>
	<%- task.title %>
	<% if (task.complete) { %>
	</strike>
	<% } %>
	</h2>
	<p>
	<%- task.description %>
	</p>
	</div>
	<button class="button small-12 large-2 columns complete-button">
	Mark <%= task.complete ? "Incomplete" : "Complete" %>
	</button>
	</li>
	</script>

	<script src="/app.bundle.js" charset="utf-8"></script>
	</body>
	</html>
	// src/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);
	},

	// If this task is incomplete, mark it complete. If it's
	// complete, mark it incomplete.
	// Just like in Ruby, the Model is a great place to stuff
	// all your complex business logic.
	toggleComplete: function() {
	var newStatus = !this.get('complete');
	this.set('complete', newStatus);
	}
	});

	export default Task;
	import Backbone from 'backbone';

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

	// Listen to our model, and re-render whenever it changes.
	this.listenTo(this.model, 'change', this.render);
	},

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

	// Re-bind events, since our HTML is all brand new.
	this.delegateEvents();

	// Enable chained calls
	return this;
	},

	events: {
	"click .complete-button": "toggleComplete"
	// For some reason only DOM events go here.
	},

	// This wrapper is a bit of a bummer, but it's a must.
	// Backbone view events must be handled by a function
	// in that view.
	toggleComplete: function() {
	this.model.toggleComplete();

	// Notice that we don't need to call render. By watching
	// the model for changes, we get this functionality for
	// free! Very nice when you've got many ways to mess
	// with a model.
	}
	});

	export default TaskView;