I have created the following code and i'm unable to destroy a model from the backend.
I get a 'model is not defined error'.
I don't know why it cannot find a model? what parameters am i missing? am i wrong in adding this in this list view? should i add it in the models view? and if that is the case i added the save new model in the list view so can't see why i can't add it her.
window.LibraryView = Backbone.View.extend({
tagName: 'section',
className: 'mynotes',
events: {
"keypress #new-title": "createOnEnter",
//"keypress #new-content": "createOnEnter"
"click .mybutton": "clearCompleted"
},
initialize: function() {
_.bindAll(this, 'render');
this.template = _.template($('#library-template').html());
this.collection.bind('reset', this.render);
this.collection.bind('add', this.render);
this.collection.bind('remove', this.render);
},
render: function() {
var $mynotes,
collection = this.collection;
$(this.el).html(this.template({}));
$mynotes = this.$(".mynotes");
collection.each(function(mynote) {
var view = new LibraryMynoteview({
model: mynote,
collection: collection
});
$mynotes.append(view.render().el);
});
return this;
},
createOnEnter: function(e) {
var input = this.$("#new-title");
var input2 = this.$("#new-content");
//var msg = this.model.isNew() ? 'Successfully created!' : "Saved!";
if (!input || e.keyCode != 13) return;
// this.model.save({title: this.$("#new-title").val(), content: this.$("#new-content").val() }, {
var newNote = new Mynote({title: this.$("#new-title").val(), content: this.$("#new-content").val()});
this.collection.create(newNote);
},
clearCompleted: function() {
this.model.destroy();
this.collection.remove();
}
});
You have to bind your clearCompleted method to this:
_.bindAll(this, 'render', 'clearCompleted');
Related
This is my first time using backbone, so I'm pretty confused about everything. I'm trying to make a todo list. Once I click "finished" on the todo, I want it to append to the "Completed" list.
I've been following this tutorial, and I tried to replicate the code(I tried to create a new completedTodo view and stuff like that), and I tried to do when clicking "finished" it would delete the $el, and I would add to the completedTodos. I think the problem here is even if it's added, it's not doing anything.
done: function() {
var completed = new CompletedTodo({
completedTask: this.$('.task').html(),
completedPriority: this.$('.priority').html()
});
completedTodos.add(completed);
this.model.destroy();
},
I put in a debugger there to see if it actually added to the collection, and when i did completedTodos.toJSON();, it does give me back the new thing I just added.
However, it does not append to my collection list.
Here is my whole entire script file, in case I named anything wrong.
var Todo = Backbone.Model.extend({
defaults: {
task: '',
priority: ''
}
});
var CompletedTodo = Backbone.Model.extend({
defaults: {
completedTask: '',
completedPriority: ''
}
});
var Todos = Backbone.Collection.extend({});
var todos = new Todos();
var CompletedTodos = Backbone.Collection.extend({});
var completedTodos = new CompletedTodos();
//Backbone view for one todo
var TodoView = Backbone.View.extend({
model: new Todo(),
tagName: 'tr',
initialize: function() {
this.template = _.template($('.todos-list-template').html());
},
events: {
'click .finished-todo': 'done',
'click .delete-todo' : 'delete'
},
done: function() {
var completed = new CompletedTodo({
completedTask: this.$('.task').html(),
completedPriority: this.$('.priority').html()
});
completedTodos.add(completed);
this.model.destroy();
},
delete: function() {
this.model.destroy();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
//Backbone view for all todos
var TodosView = Backbone.View.extend({
model: todos,
el: $('.todos-list'),
initialize: function() {
this.model.on('add', this.render, this);
this.model.on('remove', this.render, this);
},
render: function() {
var self = this;
this.$el.html('');
_.each(this.model.toArray(), function(todo) {
self.$el.append((new TodoView({model: todo})).render().$el);
});
return this;
}
});
//View for one Completed Todo
var CompletedTodoView = Backbone.View.extend({
model: new CompletedTodo(),
tagName: 'tr',
initialize: function() {
this.template = _.template($('.completed-todos-template').html());
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
//View for all Completed Todos
var CompletedTodosView = Backbone.View.extend({
model: completedTodos,
el: $('.completed-todos-list'),
initialize: function() {
this.model.on('add', this.render, this);
},
render: function() {
var self = this;
this.$el.html('');
_.each(this.model.toArray(), function(completedTodo) {
self.$el.append((new CompletedTodoView({model: completedTodo})).render().$el);
});
return this;
}
});
var todosView = new TodosView();
$(document).ready(function() {
$('.add-todo').on('click', function() {
var todo = new Todo({
task: $('.task-input').val(),
priority: $('.priority-input').val()
});
$('.task-input').val('');
$('.priority-input').val('');
todos.add(todo);
});
});
After this, I also have to figure out how to use Parse to make it persist to the database. I figured I'd get everything working in backbone first, and then try to do put in the database. I'm also suppose to use node/express, so would that help? I'm pretty much a Ruby on Rails kind of person, so I don't really know any of these javascript framework type of stuff.
Thanks for your help!
Alright,
It was just because I didn't initialize the view.
var completedTodosView = new CompletedTodosView();
This fixed it.
In my web application, I have a model that is mixture of normal standard attributes (strings, booleans, etc) and the collections. In the application a user can create a group and add a projects to that group. The group is collection with the model. I can add and remove projects to the group absolutely fine, in so much that i can see the projects being added or removed in my logging, and also in the database.
To add projects to a group I open a modal and clicking a button in that model triggers model.save() and this triggers a change event. However if I add user and then remove without reloading the page, the change is not fired, why would this be? Here is the modal view,
Modal View
Views.OrganisastionEditView = Backbone.View.extend({
className : 'modal-body',
template: _.template( $('#tpl-edit-organisation').html() ),
events: {
"click .js-add-member" : "addMember",
"click .js-add-client" : "addClient",
"click .js-add-project" : "addProject",
"click .js-add-team" : "addTeam",
"click .search-results a" : "selectSearchResult",
"click .js-remove-pill" : "removeAttribute",
"submit .edit-organisation" : "saveOrganisation",
"click .js-remove-delete" : "deleteOrganisation",
"click .js-make-admin" : "changeAdmin"
},
initialize: function() {
//this.listenTo(this.model, 'change', this.snyc);
this.listenTo(this.model.get('members'), 'change', this.changeMember);
this.render();
},
render: function() {
var self = this;
// this.model.initialize();
$('#myModal').on('hidden.bs.modal', function () {
self.remove();
Pops.Routes.Application.navigate('/groups', { trigger: false } );
});
this.$el.html( this.template({
organisation: this.model.toJSON()
})).insertAfter('.modal-header');
var organisationProjectsView = new Views.GroupsProjectsViews({
collection: this.model.get('projects')
});
var organisationClientsView = new Pops.Views.GroupsClientsViews({
collection: this.model.get('clients')
});
var organisationMembersView = new Views.GroupsMembersAdminViews({
collection: this.model.get('members')
});
var organisationTeamsView = new Views.GroupsTeamsViews({
collection: this.model.get('teams')
});
$("#myModal").modal();
},
deleteOrganisation: function(e) {
e.preventDefault();
this.model.destroy();
$("#myModal").modal('hide');
this.remove();
},
removeAttribute: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
switch(element.data('type')) {
case "project":
console.log(this.model.get('projects'));
this.model.get('projects').remove(element.data('id'));
element.parents('.avatar-pill').remove();
break;
case "client":
this.model.get('clients').remove(element.data('id'));
element.parents('.avatar-pill').remove();
break;
}
},
addMember: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
this.$('.search').parent().children().show();
this.$('.search').first().remove();
//element.parent().children().hide();
var search = new Views.SearchView({
collection: new Collections.Users,
type : "users",
merge: false
});
element.parent().append(search.render().el);
},
addProject: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
this.$('.search').parent().children().show();
this.$('.search').first().remove();
//element.parent().children().hide();
var search = new Views.SearchView({
collection: new Collections.Projects,
type : "projects",
merge: false
});
element.parent().append(search.render().el);
},
selectSearchResult: function(e) {
e.preventDefault();
var element = $(e.currentTarget),
self = this;
switch( element.data('type')) {
case "project":
var project = new Models.Project({ id: element.data('id')});
project.fetch({
success: function() {
self.model.get('projects').add(project);
console.log(self.model.get('projects'));
var model = self.model;
self.$('.search').hide();
self.$('button').show();
var projectsDetails = new Views.ProjectNamePillView({
model : project
});
self.$('.search').parent().append( projectsDetails.render().el );
self.$('.search').remove();
}
});
break;
}
},
saveOrganisation: function(e) {
e.preventDefault();
var element = $(e.currentTarget);
var data = element.serializeJSON();
this.model.set(data);
this.model.save();
},
});
Single Model View
Views.OrganisationView = Backbone.View.extend({
tagName: 'div',
className:'group group--panel col-sm-3',
template : _.template( $('#tpl-single-group').html() ),
events: {
"click a[data-type=organisation], button[data-type=organisation]" : "edit",
"click .js-delete-group" : "removeOrganisation",
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
//this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.removeView);
},
render: function() {
console.log('getting fired');
this.$el.html( this.template({
group: this.model.toJSON()
}));
return this;
},
removeView: function() {
this.remove();
},
removeOrganisation: function(e) {
this.model.destory();
this.remove();
},
edit: function(e) {
e.preventDefault();
Routes.Application.navigate('/organisation/edit/' + this.model.get('id'), { trigger: false } );
var editClient = new Views.OrganisastionEditView({
model: this.model
});
}
});
Change events are triggered on the model itself not its attributes. You can however listen to a particular attribute change by using the change:[attribute] event naming format.
In your example you would change:
this.listenTo(this.model.get('members'), 'change', this.changeMember);
To look like:
this.listenTo(this.model, 'change:members', this.changeMember);
Check the Backbonejs event docs.
i am working on learn backbone.js, so i decided to make mi own Todo app using backbone.js and a localstorage plugin. I already have the Todo app in wich you can add and remove todos, now I am working on make them sortable in done and not done tasks. But the problem is that i can't find a way to do it. i created a method in the view called sort_done()
sort_done: function(){
var done = this.collection.where({done: true});
console.log(done);
}
But don't know how could i udate the view in order to just show thedone or not done tasks, i appreciate if someone could give me some advice in how i can manage this kind of ´problem. I also leave the model, collection and views js so you can take a look.
Model:
var Task = Backbone.Model.extend({
defaults:{
title: "An empyt task..",
done: false
},
validate: function(attrs){
if(! $.trim(attrs.title)){
return "The task has no title"
}
}
});
var task = new Task;
Collection:
var Tasks = Backbone.Collection.extend({
model: Task,
localStorage: new Backbone.LocalStorage("todos-collection")
});
var tasks = new Tasks();
Views:
var TaskView = Backbone.View.extend({
tagName: "li",
template: _.template( $('#task').html() ),
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
render: function(){
var template = this.template( this.model.toJSON() );
this.$el.html( template );
return this;
},
events: {
'click .icon-checkbox': 'toggleState',
'click .task_title': 'editTask',
'keypress .edit': 'updateOnEnter',
'click .close_btn': 'clear'
},
toggleState: function(e){
var $checkbox = $(e.target);
this.model.save('done', !this.model.get('done'));
},
editTask: function(e){
this.task = $(e.target);
this.editBox = this.task.next();
this.editInput = this.editBox.find('.edit');
$(".task_title").removeClass("display__none");
$(".editBox").removeClass("edit_box__editing");
this.task.addClass("display__none")
this.editBox.addClass("edit_box__editing");
this.editInput.attr('placeholder', this.task.text()).focus();
},
updateOnEnter: function(e){
if(e.keyCode === 13){
this.close();
}
},
close: function(){
var value = this.editInput.val();
if(!value){
this.task.removeClass("display__none")
this.editBox.removeClass("edit_box__editing");
}else{
this.model.save({title: value});
this.task.removeClass("display__none")
this.editBox.removeClass("edit_box__editing");
}
},
clear:function(){
this.model.destroy();
}
});
var TasksView = Backbone.View.extend({
el: '#tasks',
initialize: function(){
this.render();
this.collection.on('add', this.addOne, this);
this.collection.on()
},
render: function(){
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task){
var taskView = new TaskView({ model: task });
this.$el.append( taskView.render().el );
}
});
var AddTask = Backbone.View.extend({
el: '#todos',
initialize: function(){
this.collection.fetch();
},
events:{
'click #add': 'addTask',
'click #filter_done': 'sort_done',
'keypress #inputTask': 'updateOnEnter'
},
addTask: function(){
var taskTitle = $('#inputTask'). val();
$('#inputTask').val(""); //clear the input
if($.trim(taskTitle) === ''){//check if the input has some text in it
this.displayMessage("Todo's can not be empty");
}else{
var task = new Task( {title: taskTitle} ); // create the task model
this.collection.create(task); //add the model to the collection
}
},
displayMessage: function(msg){
$('#inputTask').focus().attr("placeholder", msg);
},
updateOnEnter: function(e){
if(e.keyCode === 13){
this.addTask();
}
},
sort_done: function(){
var done = this.collection.where({done: true});
console.log(done);
}
});
var tasksView = new TasksView( {collection: tasks} );
var addTask = new AddTask( {collection: tasks} );
Thank yoou very much!
When you call collection.where your collection is not filtered, it just returning the filtered models (not changing the initial collection), so for your problem you have to do like this :
initialize: function(){
this.render();
this.collection.on('add', this.addOne, this);
this.collection.on('reset', this.render, this); // here I change the event to reset
},
...
sort_done: function(){
var done = this.collection.where({done: true});
this.collection.reset(done);
console.log(done);
}
I make a simple todo app:
var Todo = Backbone.Model.extend({
});
var Todos = Backbone.Collection.extend({
model: Todo
});
var todos = new Todos();
var ItemView = Backbone.View.extend({
tagName: "li",
template: _.template($("#item-template").html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
initialize: function () {
this.listenTo(todos, 'remove', this.remove);
},
events: {
"click .delete": "clear"
},
clear: function () {
todos.remove(this.model);
}
});
var AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.listenTo(todos, 'add', this.addOne);
},
addOne: function(todo) {
var view = new ItemView({
model: todo
});
this.$("#list").append(view.render().el);
},
events: {
"click #create": "create"
},
create: function () {
var model = new Todo({
title: this.$("#input").val()
});
todos.add(model);
}
})
var app = new AppView();
and DEMO online is here: http://jsfiddle.net/JPL94/1/
I can add item correctly, but when I want delete some item, all of them been removed;
I found it related to the bind event in ItemView, when I click one delete button, all of them are triggered.
But how can I solve this problem?
You are listening to remove events from the collection, and if my memory serves me right a collection will dispatch a remove event whenever a model is removed, so when you remove a model from the collection, all the views will see the event.
I changed your initialize in the view to
initialize: function () {
this.listenTo(this.model, 'remove', this.remove);
},
And it seems to work.
http://jsfiddle.net/JPL94/5/
Is is a total Backbone.js noob question. I am working off of the ToDo Backbone.js example trying to build out a fairly simple single app interface. While the todo project is more about user input, this app is more about filtering the data based on the user options (click events).
I am completely new to Backbone.js and Mongoose and have been unable to find a good example of what I am trying to do. I have been able to get my api to pull the data from the MongoDB collection and drop it into the Backbone.js collection which renders it in the app. What I cannot for the life of me figure out how to do is filter that data and re-render the app view. I am trying to filter by the "type" field in the document.
Here is my script:
(I am totally aware of some major refactoring needed, I am just rapid prototyping a concept.)
$(function() {
window.Job = Backbone.Model.extend({
idAttribute: "_id",
defaults: function() {
return {
attachments: false
}
}
});
window.JobsList = Backbone.Collection.extend({
model: Job,
url: '/api/jobs',
leads: function() {
return this.filter(function(job){ return job.get('type') == "Lead"; });
}
});
window.Jobs = new JobsList;
window.JobView = Backbone.View.extend({
tagName: "div",
className: "item",
template: _.template($('#item-template').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
this.setText();
return this;
},
setText: function() {
var month=new Array();
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
var title = this.model.get('title');
var description = this.model.get('description');
var datemonth = this.model.get('datem');
var dateday = this.model.get('dated');
var jobtype = this.model.get('type');
var jobstatus = this.model.get('status');
var amount = this.model.get('amount');
var paymentstatus = this.model.get('paymentstatus')
var type = this.$('.status .jobtype');
var status = this.$('.status .jobstatus');
this.$('.title a').text(title);
this.$('.description').text(description);
this.$('.date .month').text(month[datemonth]);
this.$('.date .day').text(dateday);
type.text(jobtype);
status.text(jobstatus);
if(amount > 0)
this.$('.paymentamount').text(amount)
if(paymentstatus)
this.$('.paymentstatus').text(paymentstatus)
if(jobstatus === 'New') {
status.addClass('new');
} else if (jobstatus === 'Past Due') {
status.addClass('pastdue')
};
if(jobtype === 'Lead') {
type.addClass('lead');
} else if (jobtype === '') {
type.addClass('');
};
},
remove: function() {
$(this.el).remove();
},
clear: function() {
this.model.destroy();
}
});
window.AppView = Backbone.View.extend({
el: $("#main"),
events: {
"click #leads .highlight" : "filterLeads"
},
initialize: function() {
Jobs.bind('add', this.addOne, this);
Jobs.bind('reset', this.addAll, this);
Jobs.bind('all', this.render, this);
Jobs.fetch();
},
addOne: function(job) {
var view = new JobView({model: job});
this.$("#activitystream").append(view.render().el);
},
addAll: function() {
Jobs.each(this.addOne);
},
filterLeads: function() {
// left here, this event fires but i need to figure out how to filter the activity list.
}
});
window.App = new AppView;
});
Have you tried resetting the collection with the result of the "leads" filter?
Something like
window.AppView = Backbone.View.extend({
el: $("#main"),
events: {
"click #leads .highlight" : "filterLeads"
},
initialize: function() {
Jobs.bind('add', this.addOne, this);
Jobs.bind('reset', this.render, this); //render on reset
Jobs.fetch(); //this triggers reset
},
addOne: function(job) {
var view = new JobView({model: job});
this.$("#activitystream").append(view.render().el);
},
//add a render function
render: function() {
this.$("#activitystream").empty(); //empty out anything thats in there
Jobs.each(this.addOne);
},
filterLeads: function() {
Jobs.reset(Jobs.leads()); //reset Jobs with only the leads
}
});
Also your AppView has no 'render' method, yet you reference it here:
Jobs.bind('all', this.render, this);