Created
November 30, 2016 21:25
-
-
Save CheezItMan/14346e3bcf1cb25879341713a849015d to your computer and use it in GitHub Desktop.
Example showing Backbone Trigger in Action!
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
import $ from 'jquery'; | |
import Backbone from 'backbone'; | |
import _ from 'underscore'; | |
import Task from 'app/models/task'; | |
import TaskView from 'app/views/task_view'; | |
import TaskList from 'app/collections/task_list'; | |
var TaskListView = Backbone.View.extend({ | |
initialize: function(options) { | |
// Store a the full list of tasks | |
//this.taskData = options.taskData; | |
// Compile a template to be shared between the individual tasks | |
this.taskTemplate = _.template($('#task-template').html()); | |
// Keep track of the <ul> element | |
this.listElement = this.$('.task-list'); | |
// Create a TaskView for each task | |
this.cardList = []; | |
this.model.forEach(function(task) { | |
this.addTask(task); | |
}, this); // bind `this` so it's available inside forEach | |
this.input = { | |
title: this.$('.new-task input[name="title"]'), | |
description: this.$('.new-task input[name="description"]') | |
}; | |
this.listenTo(this.model, "update", this.render); | |
this.listenTo(this.model, "add", this.addTask); | |
this.listenTo(this.model, "remove", this.removeTask); | |
}, // End initialize function | |
render: function() { | |
// Make sure the list in the DOM is empty | |
// before we start appending items | |
this.listElement.empty(); | |
// reconnects the DOM Event Handlers | |
// Loop through the data assigned to this view | |
this.cardList.forEach(function(card) { | |
// Cause the task to render | |
card.render(); | |
// Add that HTML to our task list | |
this.listElement.append(card.$el); | |
}, this); | |
return this; // enable chained calls | |
}, | |
events: { | |
'click .clear-button': 'clearInput', | |
'submit .new-task': 'createTask' | |
}, | |
clearInput: function(event) { | |
this.input.title.val(''); | |
this.input.description.val(''); | |
}, | |
createTask: function(event) { | |
// Normally a form submission will refresh the page. | |
// Suppress that behavior. | |
event.preventDefault(); | |
// Get the input data from the form and turn it into a task | |
var task = new Task(this.getInput()); | |
// Add the new task to our list of tasks | |
this.model.add(task); | |
// Clear the input form so the user can add another task | |
this.clearInput(); | |
}, // end createTast(); | |
getInput: function() { | |
var task = { | |
title: this.input.title.val(), | |
description: this.input.description.val() | |
}; | |
return task; | |
}, // end getInput(); | |
addTask: function(task) { | |
var card = new TaskView({ | |
model: task, | |
template: this.taskTemplate | |
}); | |
this.cardList.push(card); | |
this.listenTo(card, "editMe", this.editCard); | |
}, | |
editCard: function(card) { | |
// set the title to the selected Card's title | |
this.input.title.val( card.model.get("title")); | |
// set the description to the selected card's description | |
this.input.description.val(card.model.get("description")); | |
// remove the Task from the collection | |
this.model.remove(card.model); | |
}, | |
removeTask: function(model, collection, options) { | |
var filteredList = []; | |
for(var i = 0; i < this.cardList.length; i++) { | |
if(this.cardList[i].model == model) { | |
console.log("Found the bugger!"); | |
} else { | |
filteredList.push(this.cardList[i]); | |
} | |
} | |
this.cardList = filteredList; | |
} | |
}); | |
// task_list_view.js | |
export default TaskListView; |
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
var TaskView = Backbone.View.extend({ | |
//tagName: 'li', | |
initialize: function(options) { | |
//this.task = options.task; | |
this.template = options.template; | |
this.listenTo(this.model, "change", this.render); | |
}, | |
events: { | |
'click .complete-button': 'completeHandler', | |
'click .delete-button': 'deleteTask', | |
'click div': 'editTask' | |
}, | |
editTask: function() { | |
// Trigger the editMe event | |
this.trigger('editMe', this); | |
}, | |
deleteTask: function() { | |
this.model.destroy(); | |
}, | |
completeHandler: function() { | |
console.log("Handler run!"); | |
this.model.toggleComplete(); | |
//this.render(); | |
}, | |
render: function() { | |
// could use .toJSON() instead of .attributes | |
// reconnect all Event Handlers | |
this.delegateEvents(); | |
var html = this.template({task: this.model.attributes}); | |
this.$el.html(html); | |
// Enable chained calls | |
// This is important enough that we'll leave it in, but | |
// we wont talk about it until later. | |
return this; | |
} | |
}); | |
// task_view.js | |
export default TaskView; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment