title: Backbonejs collection not populated, but fetch works
body: <p>Heres what I've been working on: <a href="http://jsfiddle.net/leapin_leprechaun/29aysou5/3/" rel="nofollow">http://jsfiddle.net/leapin_leprechaun/29aysou5/3/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Results App Training&lt;/title&gt;
  
  
        &lt;script src="js/libs/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="js/libs/underscore.js"&gt;&lt;/script&gt;
        &lt;script src="js/libs/backbone.js"&gt;&lt;/script&gt;
  
  
  
          &lt;script type="text/javascript"&gt;
      $( document ).ready(function() {
  
  
      /*
        ***********
        Models
        ***********
      */
      var MatchInfo = Backbone.Model.extend({
      defaults: {
        season:"1415"
      }
      });//model class
  
      var matchInfo = new MatchInfo(); //model instance
  
  
      /*
        ***********
        Collections
        ***********
      */
  
      var Matches = Backbone.Collection.extend({
        model: MatchInfo, //note this references the model class, not the model instance
        url : "http://www.hookhockey.com/index.php/temp-gillian/",
        sync : function(method, collection, options) {
          // By setting the dataType to "jsonp", jQuery creates a function
          // and adds it as a callback parameter to the request, e.g.:
          // [url]&amp;callback=jQuery19104472605645155031_1373700330157&amp;q=bananarama
          // If you want another name for the callback, also specify the
          // jsonpCallback option.
          // After this function is called (by the JSONP response), the script tag
          // is removed and the parse method is called, just as it would be
          // when AJAX was used.
          //console.log('sync');
          options.dataType = "jsonp";
          return Backbone.sync(method, collection, options);
        },
        parse : function(response) {
         // console.log(response.matches);
         //.matches is what the json at http://www.hookhockey.com/index.php/temp-gillian/ is putting out 
          return response.matches;
  
        }
  
  
  
      }); //collection class
      var matches = new Matches(); //collection instance
  
      matches.bind("sync", matches.render, matches);
  
      matches.fetch({
              success : function(collection, response, options) {
  
  
               /* notes: calling these outside of the success listener meant that nothing got returned. This is because they fire before the fetch returns http://stackoverflow.com/questions/9431673/load-data-into-a-backbone-collection-from-json-file
               the alternative is to call them within the success function or to call them like so:
               .complete(function() {
                    console.log(matches);
                    console.log('length: ' + matches.length);
                });
  
               ..after the fetch call.
  
               */
  
                console.log('in collection instance fetch success: ' + matches.length);
  
  
               return response;
  
              },
              error : function(collection, response, options) {
                console.log(response.statusText);
              },
              // A timeout is the only way to get an error event for JSONP calls!
              timeout : 5000
          });
  
  
  
      /*
        ***********
        Views
        ***********
      */
  
      var MatchModelView = Backbone.View.extend({
       // template: _.template( $("#matchTemplate").html() ), // removed because template was not being found - uses underscore and the content from index.html script tag with the id of matchElement that contains the template tags
        id : 'someID',
        className: 'someClassName',
        initialize: function () {
              _.bindAll(this, "render");
               this.collection.bind("reset", this.render);
               },
        render: function() {
          //var matchTemplate = this.template(this.model.toJSON()); //passes in all of the model data (using this.model.toJSON()) into the template (this.template) so that info is available to the template tags
          var matchTemplate = '&lt;p&gt;' + this.model.get('title') + '&lt;/p&gt;';
          this.$el.html(matchTemplate); //pass the templated info into the el element and return it for render
          return this;
        }
  
  
  
      }); //model view class
      //var matchModelView = new MatchModelView({model:matchInfo}); //model view instance
      //console.log(matchModelView.render().el);
  
  
      var MatchesModelView = Backbone.View.extend({
      id: 'somethingelse',
       initialize: function () {
              _.bindAll(this, "render");
               this.collection.bind("reset", this.render);
               },
      render: function(){
  
       console.log('collection length in view:' + this.collection.length); //returns 0
          this.collection.each(this.oneMatch, this); 
  
          return this;
  
      },
      oneMatch: function (aMatch){
        console.log(aMatch);
          var matchView = new MatchModelView ({ model: aMatch });
          this.$el.append(MatchView.render().el);
      }
  
  
      }); //collection view class
  
  
      var matchesModelView = new MatchesModelView({collection: matches });
  
       $("#allMatches").html(matchesModelView.render().el);
  
  
  
  
  
  
  
  
  
  
  
      /*
        ***********
        Routers
        ***********
      */
  
  
  
  
  
      }); //end doc ready
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
        &lt;div class="site"&gt;
  
  
  
          &lt;div id="allMatches"&gt;adasdasd&lt;/div&gt;
  
          &lt;div id="copy"&gt;&lt;/div&gt;
  
        &lt;/div&gt; 
  
  
  
        &lt;script id="matchTemplate" type="text/template"&gt;
           &lt;%= title %&gt;
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I've just put 2 alerts in there to show where I think my issue is. I can see that the call to json is working and returning items. But at the time the view kicks in I suspect the call hasn't gone through fully. </p>
  
  <p>Is it bad practice to call a view from within the .fetch success callback? Am I losing the whole modularity advantage of backbone by doing that? Or am I missing something to get the returned objects into the collection?</p>
  
  <p>I'm new to Backbone so you can ignore all my comments within the code, just trying to keep track!! :) I realise they should all be separated out into different js files too, am just getting to grips with things first.</p>
  
  <p>Thanks for your time!</p>