title: Why collection length is 0 but fetch succeeded?
body: <p>My todos.js:</p>
  
  <pre><code>var app = app || {};
  
  (function () {
      'use strict';
      var Todos = Backbone.Collection.extend({
          model: app.Todo,
          url: '/api/todos'
      });
      app.todos = new Todos();
  })();
  </code></pre>
  
  <p>app-view.js</p>
  
  <pre><code>var app = app || {};
  (function($){
      'use strict';
      app.AppView = Backbone.View.extend({
          el: '.todoapp',
          events : {
              'keypress .new-todo': 'createOnEnter'
  
          },
  
          initialize: function() {
              this.$input = this.$('.new-todo');
              this.$list = $('.todo-list');
              app.todos.fetch( {
                  reset : true
              } );
              this.render();
          },
  
  
          render: function(){
              console.log( ' len = ' +  app.todos.length );
              app.todos.each( function(todo){
                  this.renderTodo( todo );
              }, this );
          },
  ...
  </code></pre>
  
  <p><strong>Fetched data</strong></p>
  
  <pre><code>[{
      "_id": "5801",
      "title": "testtitle123",
      "completed": false,
      "__v": 0
  }, {
      "_id": "58182",
      "title": "testtitle126",
      "completed": false,
      "__v": 0
  }, {
      "_id": "5813",
      "title": "testtitle127",
      "completed": false,
      "__v": 0
  }]
  </code></pre>
  
  <p>It succeeded to fetch data (from <a href="http://myip:8000/api/todos" rel="nofollow noreferrer">http://myip:8000/api/todos</a>). But from the console, the length is always 0.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried the following codes. but no 'OK' or 'error' logged in console.</p>
  
  <pre><code>    var app = app || {};
      (function($){
          'use strict';
          app.AppView = Backbone.View.extend({
              el: '.todoapp',
              events : {
                  'keypress .new-todo': 'createOnEnter'
  
              },
  
              initialize: function() {
                  this.$input = this.$('.new-todo');
                  this.$list = $('.todo-list');
                  this.listenTo(app.todos, 'sync', this.render);
                  app.todos.fetch( {
                      reset : true,
                      context: this,
                      success: function(col, res, op) {
                          console.log( 'OK' );
                      },
                      error: function(col, res, op){
                          console.log( 'error' );
                      }
                  } );
              },
  
              render: function(){
                  console.log( ' len = ' +  app.todos.length );
                  app.todos.each( function(todo){
                      this.renderTodo( todo );
                  }, this );
              },
  
              renderTodo: function( todo ) {
                  console.log( 'render :' + todo.title );
                  var todoView = new app.TodoView( { model : todo } );
                  this.$list.append( todoView.render().el );
              },
          });
  
      })(jQuery);
  </code></pre>