title: mock JSON response in Backbone Fetch?
body: <p>I'm learning Backbone and want to "mock" the results of a <code>.fetch()</code> call within a model. I do not want to use a testing library or actually hit an external service.</p>
  
  <p>Basically I have a setting in my model, where if <code>this.options.mock === true</code>, then just use an internal JSON object as the "result" of the fetch. Else, actually hit the API with a real AJAX request.</p>
  
  <p>However, this doesn't seem to work. My view successfully renders with the model data when I hit the actual API ("real" fetch), but not whenever I try and pass in fake data. </p>
  
  <p>Is there a way to fake a Fetch response in Backbone, without bringing in a testing library like Sinon?</p>
  
  <p>here is the complete model (at least the relevant portions of it). Basically, the model fetches data, and formats it for a template. and then the view which owns the model renders it out.</p>
  
  <pre><code>'use strict';
  (function (app, $, Backbone) {
  
      app.Models.contentModel = Backbone.Model.extend({
  
          /**
           * Initializes model. Fetches data from API.
           * @param  {Object} options Configuration settings.
           */
          initialize: function (options) {
              var that = this;
              that.set({
                  'template': options.template,
                  'mock': options.mock || false
              });
  
              $.when(this.retrieveData()).then(function (data) {
                  that.formatDataForTemplate(data);
              }, function () {
                  console.error('failed!');
              });
          },
  
          retrieveData: function () {
  
              var that = this, deferred = $.Deferred();
  
              if (typeof fbs_settings !== 'undefined' &amp;&amp; fbs_settings.preview === 'true') {
                  deferred.resolve(fbs_settings.data);
              }
              else if (that.get('mock')) {
                  console.info('in mock block');
  
                  var mock = {
                    'title': 'Test Title',
                    'description': 'test description',
                    'position': 1,
                    'byline': 'Author'
                  };
  
                  deferred.resolve(mock);
              }
              else {
                  // hit API like normal.
                  console.info('in ajax block');
                  that.fetch({
                      success: function (collection, response) {
                          deferred.resolve(response.promotedContent.contentPositions[0]);
                      },
                      error: function(collection, response) {
                          console.error('error: fetch failed for contentModel.');
                          deferred.resolve();
                      }
                  });
              }
              return deferred.promise();
          },
  
          /**
           * Formats data on a per-template basis.
           * @return {[type]} [description]
           */
          formatDataForTemplate: function (data) {
              if (this.get('template') === 'welcomead_default') {
                  this.set({
                      'title': data.title,
                      'description': data.description,
                      'byline': data.author
                  });
  
              }
              // trigger the data formatted event for the view to render.
              this.trigger('dataFormatted');
          }
      });
  })(window.app, window.jQuery, window.Backbone);
  </code></pre>
  
  <p>Relevant bit from the view (ContentView):</p>
  
  <pre><code>this.model = new app.Models.contentModel({template: this.templateName});
  this.listenTo(this.model, 'dataFormatted', this.render);
  </code></pre>
  
  <p>Is the data being set so fast that the listener hasn't been set up yet?</p>