title: Backbone.js render a view with a collection
body: <p>I'm n00b with Backbone/Require JS and I'm trying to run a View based in a Collection.
  I've split the code in files following MVC pattern
  This is my code for the view:</p>
  
  <p>File: views/petDirectory</p>
  
  <pre><code>define([
    'jquery',
    'backbone',
    'models/pet',
    'collections/pets',
    'text!templates/pet/directory.html'
  ], function($, Backbone, PetModel, PetsCollection, petDirectoryTemplate){
  
  var PetDirectoryView = Backbone.View.extend({
  
      el: $("#main"),
      template: _.template(petDirectoryTemplate),
      collection: new PetsCollection(),
  
      initialize: function() {
          var view = this;
          view.render();
      },
  
      render: function(){
          var view = this;
          var compiledTemplate = this.template({pets: view.collection});
          view.$el.html( compiledTemplate );
          return this;
      },
  });
  
  return PetDirectoryView;
  });
  </code></pre>
  
  <p>Data is loaded via API RESTful in the models, and I create the instance of PetDirectoryView in router.js.</p>
  
  <p>But I'm having something wrong (maybe asynchronus calls) because my template doesn't show the items and my Chrome Console shows something like this:</p>
  
  <pre><code>r {length: 0, models: Array[0], _byId: Object, constructor: function, url: "http://localhost:3000/pets"…}
  </code></pre>
  
  <p>Any ideas? Thanks in advance!</p>