title: backbone.js cannot render a view
body: <p>Below I have the code for one of my modules. This is kind of spagetti-ish code, but all I want to accomplish is having a model, a collection, and render a view (using underscore templates) connecting the data from the collection to the views. I'm failing miserably. The problem I'm getting is that trying to run the last call down there to testfeed.render() tells me that render is not a function, yet it is clearly defined. I'm able to fetch that data and seemingly add it to the collection from the api. What am I doing wrong here? </p>
  
  <pre><code> // Create a new module.
    var Tagfeed = app.module();
  
    // Default model.
    Tagfeed.Model = Backbone.Model.extend({
      defaults : {
          name : '',
          image : ''
      },
      initialize : function(){
          console.log('tagfeed model is initialized');
          this.on("change", function(){
              console.log("An attribute has been changed");
          });
      }
    });
  
    var feedCollection = Backbone.Collection.extend({
      model: Tagfeed.Model,
      initialize : function () {
          console.log('feedcollection is initialized');
      },
      fetch: function () {
          var thisCollection = this;
          Api_get('/api/test', function(data){
  
              $.each(data.data, function(){
                  thisCollection.add(this);
              });
              return thisCollection;
          })
      }
    });
  
    var test = new Tagfeed.Model({name:'test'});
  
    var newFeedCollection = new feedCollection();
  
    newFeedCollection.fetch();
  
    console.log(newFeedCollection.at(0));
  
    var testfeed = Backbone.View.extend({
      el: $('#main'),
      collection : newFeedCollection,
      render: function( event ){
          var compiled_template = _.template( $("#tag-template").html() );
          this.$el.html( compiled_template(this.model.toJSON()) );
          return this; //recommended as this enables calls to be chained.
      }
    });
  
    testfeed.render();
  </code></pre>
  
  <p>EDIT <strong><em>*</em></strong> updated code from @mu is short suggestions</p>
  
  <pre><code>  // Create a new module.
    var Tagfeed = app.module();
  
    // Default model.
    var tagModel = Backbone.Model.extend({
      defaults : {
          name : '',
          image : '',
          pins : 0,
          repins : 0,
          impressions : 0
      },
      initialize : function(){
          console.log('tagfeed model is initialized');
          this.on("change", function(){
              console.log("An attribute has been changed");
          });
      }
    });
  
    var feedCollection = Backbone.Collection.extend({
      model: tagModel,
      initialize : function () {
          console.log('feedcollection is initialized');
      },
      fetch: function () {
          var thisCollection = this;
  
          Api_get('/reporting/adlift/pin_details', function(data){
  
              thisCollection.add(data.data);
  
              return data.data;
          })
      }
    });
  
    var test = new tagModel({name:'test'});
  
    var newFeedCollection = new feedCollection();
  
    newFeedCollection.fetch();
  
    console.log(newFeedCollection.at(0));
  
    var TestFeed = Backbone.View.extend({
      el: $('#main'),
      render: function( event ){
          console.log('here');
          var compiled_template = _.template( $("#tag-template").html(), this.collection.toJSON());
          this.el.html( compiled_template );
          return this; //recommended as this enables calls to be chained.
      },
      initialize: function() {
          console.log('initialize view');
          this.collection.on('reset', this.render, this);
      }
    });
  
    //Tagfeed.testfeed.prototype.render();
  
    var testfeed = new TestFeed({ collection: newFeedCollection });
  
    testfeed.render();
  </code></pre>
  
  <p>and now when i run testfeed.render() I don't see any error, nor do i see that console.log in the render function. thoughts?</p>