Skip to content

Instantly share code, notes, and snippets.

@droberts-sea
Last active November 29, 2016 04:29
Show Gist options
  • Save droberts-sea/0a18925644f6f1e5db1ec11eddf7dbba to your computer and use it in GitHub Desktop.
Save droberts-sea/0a18925644f6f1e5db1ec11eddf7dbba to your computer and use it in GitHub Desktop.
Ada C6 Backbone Models Check-in 2
<!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>
// 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;
@droberts-sea
Copy link
Author

task_list_view.js should not have changed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment