title: Dynamically loading nested models and collections in backbone
body: <p>I have a backbone application that looks like this:</p>
  
  <pre><code>// Model for one picture
  var Picture= Backbone.Model.extend({ });
  
  // Model for Collection of Pictures
  var Pictures = Backbone.Collection.extend({ model:Picture });
  
  // Model for album
  var Album = Backbone.Model.extend();
  
  //Model for a collection of Albums
  var Albums = Backbone.Collection.extend({ model:Album });
  </code></pre>
  
  <p>My server supports the following functions</p>
  
  <pre><code>List&lt;Album&gt; GetAlbums(List&lt;Guid&gt; albumIds);
  List&lt;Picture&gt; GetPictures(albumId);
  Dictionary&lt;string, string&gt; GetAlbumMetadata(albumId);
  Dictionary&lt;string, string&gt; GetPictureMetadata(pictureId);
  </code></pre>
  
  <p>My page starts with one or more albums being loaded initially.</p>
  
  <p>It should first get a list of albums.</p>
  
  <p>Then it loads the metadata of all the albums.</p>
  
  <p>Then it loads the pictures in each album.</p>
  
  <p>Then it loads the metadata of each picture.</p>
  
  <p>I cannot load all of it from a single server side call, because it is expensive, so I have to load it dynamically.</p>
  
  <p>Is there a simple, backbone specific way of loading all this dynamically? Currently, I am reading the JSON returned on fetch() of each function, and then making the next function call based on the results returned from each call.</p>
  
  <p>There has to be a more elegant way of doing this.</p>