Backbone : Uncaught TypeError: Cannot call method 'each' of undefined

Question

I am running this sample backbone script . But I am getting a error like 'Cannot call method 'get' of undefined'. I tried everything with what i know so far. But I still have the problem. Can anyone help me to solve this issue.

// JavaScript Document
(function(){

 window.App = {

     Models : {},

     Collections : {},

     Views : {}

     }

  window.template = function(id)
  {
      return _.template($('#'+id).html())
  }  

  //model
  App.Models.Task = Backbone.Model.extend({});

  //view
  App.Views.Task  = Backbone.View.extend({

   tagName : 'li',

   render : function(){

    this.$el.html(this.model.get('title'));

    return this;

   }

  });

  //collection
  App.Collections.Tasks = Backbone.Collection.extend({

   model : App.Models.Task

  });  

  //collection view
  App.Views.Tasks = Backbone.Collection.extend({

   tagName : 'ul',

   initialize : function(){this.render();},

   render : function(){

    this.collection.each(function(t){

     var v = new App.Views.Task({model : t});       

     this.$el.append(v.render().el);

    });

   }

  });

  //begin play yard
   var tasks = new App.Collections.Tasks([
    {title : 'Go to Mall', priority : 4},
    {title : 'Go Home', priority : 3},
    {title : 'Go to Movie', priority : 2}
  ]);


  var tasksView = new App.Views.Tasks({collection : tasks});
  console.log(tasksView.el);

})();

Answer 1

Here is a working jsfiddle of your code.

Your collection view was broken. Here is the working version.

//collection view
// Notice that it's a `Backbone.View` and not a `Backbone.Collection`
App.Views.Tasks = Backbone.View.extend({

    tagName : 'ul',

    initialize : function(){this.render();},

    render : function(){

        this.collection.each(function(t){

            var v = new App.Views.Task({model : t});       

            this.$el.append(v.render().el);

        }, this); // scope to the view using `this`

    }

});