Skip to content

Instantly share code, notes, and snippets.

Created April 24, 2017 05:59
Show Gist options
  • Save anonymous/209589fa3db6f3725801361f6eaa5555 to your computer and use it in GitHub Desktop.
Save anonymous/209589fa3db6f3725801361f6eaa5555 to your computer and use it in GitHub Desktop.
// src/app.js
import $ from 'jquery';
import _ from 'underscore';
import Task from 'app/models/task';
import TaskList from 'app/collections/task_list';
var taskData = [ {
title: "Study JavaScript",
completed: true
},
{
title: "Learn Backbone Collections",
completed: false
},
{
title: "Take out the trash",
completed: false
}];
var taskList = new TaskList(taskData);
$(document).ready(function() {
$('#new-task').on("click", function() {
if ( $('#title').val() !== "" ) {
var task = new Task({title: $('#title').val(), completed: $('#completed').val() === "on" });
taskList.add(task);
$('#title').val("");
$('#completed').val("off");
console.log(taskList);
}
});
// Select the template using jQuery
var template_text = $('#taskItemTemplate').html();
// Get an underscore template object
var template = _.template(template_text);
taskList.on("update", function() {
$('main').empty();
taskList.each(function(task) {
$('main').append(template(task.toJSON()));
$('main section.task-item:last').find('button.delete').click ({taskCid: task.cid}, function(params) {
taskList.remove(params.data.taskCid);
});
$('main section.task-item:last').find('button.toggle').click ({taskCid: task.cid}, function(params) {
var task = taskList.get(params.data.taskCid);
task.set("completed", !task.get("completed"));
taskList.trigger("update");
});
});
});
taskList.trigger("update");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<main> </main>
<section class="new-task">
<form>
<div>
<label for="title">Title:</label>
<input name="title" id="title">
</div>
<div>
<label for="completed">Completed:</label>
<input type="checkbox" id="completed" name="completed">
</div>
<div>
<button type="button" id="new-task">
New Task
</button>
</div>
</form>
</section>
<script id="taskItemTemplate" type="text/template">
<section class="task-item">
<h1><strong>Title:</strong> <%= title %></h1>
<h3><strong>Completed:</strong> <%= completed %></h3>
<button class="toggle">Toggle <%= completed ? "Incomplete" : "Complete" %></button>
<button class="delete">Delete</button>
</section>
</script>
<script src="/app.bundle.js" charset="utf-8"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment