Backbone.js Collection Iteration Using .each()
- by the_archer
I've been doing some Backbone.js coding and have come across a particular problem where I am having trouble iterating over the contents of a collection. The line Tasker_TodoList.each(this.addOne, this);in the addAll function in AppView is not executing properly for some reason, throwing the error: Uncaught TypeError: undefined is not a function
the code in question is:
$(function() {
var Todo = Backbone.Model.extend({
defaults: {
title: "Some Title...",
status: 0 //not completed
}
});
var TodoList = Backbone.Collection.extend({
model: Todo,
localStorage: new Store('tasker')
});
var Tasker_TodoList = new TodoList();
var TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#todoTemplate').html()),
events: {
'click .delbtn': 'delTodo'
},
initialize: function(){
console.log("a new todo initialized");
//this.model.on('change', this.render, this);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
delTodo: function(){
console.log("deleted todo");
}
});
var AppView = Backbone.View.extend({
el: 'body',
events: {
'click #addBtn': 'createOnClick'
},
initialize: function(){
Tasker_TodoList.fetch();
Tasker_TodoList.on('add', this.addAll);
console.log(Tasker_TodoList);
},
addAll: function(){
$('#tasksList').html('');
console.log("boooooooma");
Tasker_TodoList.each(this.addOne, this);
},
addOne: function(todo){
console.log(todo);
},
createOnClick: function(){
Tasker_TodoList.create();
}
});
var Tasker = new AppView();
});
can somebody help me in finding out what I am doing wrong? Thank you all for your help :-)
