Created
April 24, 2017 05:59
-
-
Save anonymous/209589fa3db6f3725801361f6eaa5555 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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