title: How do I bootstrap a collection in Backbone.js using Javascript only
body: <p><strong>Context:</strong> I am building an application that needs several large collections of reference data to operation. I am limited to HTML and Javascript only (including JSON).</p>
  
  <p><strong>Question</strong>: How do I bootstrap a collection in Backbone.js where the collection objects are in JSON format on the server and I'm using Javascript only?</p>
  
  <p>This is what I know already:</p>
  
  <ul>
  <li>Backbone.js bootstrapping best practice requires Rails or some other server-side language (<a href="http://backbonejs.org/#FAQ-bootstrap" rel="noreferrer">http://backbonejs.org/#FAQ-bootstrap</a>).</li>
  <li>Most Javascript I/0 operations are asynchronous, such as loading JSON from the server.</li>
  <li>Using fetch() to bootstrap data is considered an anti-pattern in Backbone.js. fetch() is also also an asynchronous operation.  </li>
  </ul>
  
  <p>This is what I've come up with so far:</p>
  
  <pre><code>ItemList = Backbone.Collection.extend({
    model: Item,
    url: 'http://localhost:8080/json/items.json'
  });
  var itemList = new ItemList;
  itemList.fetch();
  itemList.on('reset', function () { dqApp.trigger('itemList:reset'); });
  </code></pre>
  
  <p><em>'dqApp' is my application object. I can display a spinner, and update a loading status while collections are being populated by sending alerts to the application object.</em>  </p>