title: Daisy chaining dependent AJAX requests in Backbone.js
body: <p>I am looking to daisy chain Backbone requests in which the second request is dependent on the result of the first. How do I do it the right way? jQuery <code>$.done()</code> does not seem to work for me the right way. To explain better, here is a hypothetical example:</p>
  
  <p>I have a list of suppliers and each supplier has a list of parts that they supply to the company. I want to fetch all the suppliers and then fetch all parts for this list of suppliers. Here is a sample code that I am trying to use without luck. </p>
  
  <pre><code>var App = {};
  
  App.Supplier = Backbone.Model.extend({ });
  App.Part = Backbone.Model.extend({ });
  
  App.Suppliers = Backbone.Collection.extend({
     model: App.Supplier 
  });
  
  App.Parts = Backbone.Collection.extend({
      model: App.Part
  })
  
  var suppliers = new App.Suppliers;
  var parts = new App.Parts;
  
  var supplier_request = suppliers.fetch();
  
  supplier_request.done(function(){
      parts.fetch_by_suppliers([supplier1, supplier2, ...]);
  });
  </code></pre>
  
  <p>What happens is the second request fires immediately after the first reply has been received and <strong>before the <code>App.Supplier</code> models are instantiated</strong>. The result is -- the supplier list remains empty and the second request fires off with the empty list of suppliers.</p>