title: Getting most basic Backgrid.js example working
body: <p>I am trying to get the most basic example of backgrid.js to work. In other words, an example where i can drop the source folder into my xampp/htdocs folder and run without having to do anything else.</p>
  
  <p>I have tried many ways to get the code to run but i cannot get anything to show up. 
  Here is the html page i made to try to see an example working. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.css"/&gt;
      &lt;link rel="stylesheet" href="lib/backgrid.css"/&gt;
      &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="underscore-min.js"&gt;&lt;/script&gt;
      &lt;script src="backbone-min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/backgrid.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="grid"&gt;
      &lt;script type="text/javascript"&gt;
          var Territory = Backbone.Model.extend({});
  
          var Territories = Backbone.Collection.extend({
              model: Territory,
              url: "territories.json"
          });
  
          var territories = new Territories();
  
          var columns = [{
              name: "id", // The key of the model attribute
              label: "ID", // The name to display in the header
              editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
              // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
              cell: Backgrid.IntegerCell.extend({
                  orderSeparator: ''
              })
          }, {
              name: "name",
              label: "Name",
              // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
              cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
          }, {
              name: "pop",
              label: "Population",
              cell: "integer" // An integer cell is a number cell that displays humanized integers
          }, {
              name: "percentage",
              label: "% of World Population",
              cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
          }, {
              name: "date",
              label: "Date",
              cell: "date"
          }, {
              name: "url",
              label: "URL",
              cell: "uri" // Renders the value in an HTML anchor element
          }];
  
          // Initialize a new Grid instance
          var grid = new Backgrid.Grid({
              columns: columns,
              collection: territories
          });
  
          // Render the grid and attach the root to your HTML document
          $("#example-1-result").append(grid.render().el);
  
          // Fetch some countries from the url
          territories.fetch({reset: true});
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for your time!</p>