Last active
May 30, 2017 15:21
-
-
Save CheezItMan/f6ca39005274ec23d79060384dbf944b 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 jQuery | |
import $ from 'jquery'; | |
import _ from 'underscore'; | |
import Task from './models/task'; | |
import TaskList from './collections/task_list'; | |
var taskData = [{ | |
title: "Create a model", | |
completed: true | |
}, | |
{ | |
title: "Create a collection", | |
completed: false | |
}]; | |
var taskList = new TaskList(taskData); | |
var render = function(task) { | |
// Select the template using jQuery | |
var template_text = $('#taskItemTemplate').html(); | |
//console.log(template_text); | |
// Get an underscore template object | |
var templateObject = _.template(template_text); | |
// Use the underscore template function to compile the | |
// template and data into raw html. | |
var compiledHTML = templateObject(task.toJSON()); | |
// append the html to the unordered list. | |
$('.todo-items').append(compiledHTML); | |
}; | |
var renderList = function(taskList) { | |
// Clear the unordered list | |
$('.todo-items').empty(); | |
// Iterate through the list rendering each Task | |
taskList.each(function(task) { | |
render(task); | |
}); | |
}; | |
$(document).ready(function() { | |
renderList(taskList); | |
}; | |
var readNewTaskForm = function() { | |
// Get the values from the fields | |
var title = $('#title').val(); | |
$('#title').val(''); | |
var description = $('#description').val(); | |
$('#description').val(''); | |
var completed = $('#completed-checkbox').is(":checked"); | |
$('#completed-checkbox').prop('checked', false); | |
return { | |
title: title, | |
description: description, | |
completed: completed | |
}; | |
$('#add-task').click( function() { | |
// Create a new Task | |
var task = new Task( readNewTaskForm() ); | |
// Add the Task to the list | |
taskList.add(task); | |
// Clear the Unordered list | |
$('.todo-items').empty(); | |
// re-render the list | |
renderList(taskList); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment