title: Backbone parsing json response
body: <p>I've been using Backbone for a total of 3 days now, and I can see that this has been asked about quite a lot, but honestly I'm just not getting it. I've been banging my head against the wall trying to get a basic app running parsing nested json and I just can't seem to work it out. It all works if I flatten out the json response, and remove the nested elements, but that's not how I will receive it.</p>
  
  <p>I've tried some examples with Backbone relational, but I'm really stuck here, a total backbone n00b, and hoping for some help.</p>
  
  <p><strong>Here is the HTML:</strong></p>
  
  <pre><code>&lt;div id="employee-data"&gt;
      &lt;script type="text/template" id="employees-template"&gt;
          &lt;ol id="data-block"&gt;
          &lt;/ol&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/script&gt;
      &lt;script type="text/template" id="employee-template"&gt;
          &lt;h2&gt;Your employer: &lt;span&gt;&lt;%= employerName %&gt;&lt;/span&gt; &lt;/h2&gt;
          &lt;div&gt;Employee Id: &lt;span&gt;&lt;%= employeeId %&gt; &lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;Name: &lt;span&gt;&lt;%= employeeName %&gt;     &lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;Title: &lt;span&gt;&lt;%= employeeJobTitle %&gt; &lt;/span&gt;&lt;/div&gt;
          &lt;div&gt;Location: &lt;span&gt;&lt;%= employeeLocation %&gt; &lt;/span&gt;&lt;/div&gt;
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is the js:</strong></p>
  
  <pre><code>var Contact = {
      Models: {},
      Collections: {},
      Views: {},
     Templates:{}
  }
  
  Contact.Models.Employee = Backbone.RelationalModel.extend({});
  
  Contact.Collections.Employees = Backbone.Collection.extend({
      model: Contact.Models.Employee,
      url: "includes/test-data.json",
  
      initialize: function(){
          console.log("Employees initialize");
      }
  });
  
  Contact.Templates.employees = _.template($("#employees-template").html());
  
  Contact.Views.Employees = Backbone.View.extend({
      el: $("#employee-data"),
      template: Contact.Templates.employees,
  
      initialize: function () {       
         this.collection.bind("reset", this.render, this);
         this.collection.bind("add", this.addOne, this);
      },
  
      render: function () {
          console.log("render")
          console.log(this.collection.length);
          $(this.el).html(this.template());
          this.addAll();      
      },
  
      addAll: function () {
         console.log("addAll")
         this.collection.each(this.addOne);
      },
  
      addOne: function (model) {
         console.log("addOne")
         view = new Contact.Views.Employee({ model: model });
         $("ol", this.el).append(view.render());
      }
  
  })
  
  
  Contact.Templates.employee = _.template($("#employee-template").html());
  
  Contact.Views.Employee = Backbone.View.extend({
      tagName: "li",
      template: Contact.Templates.employee,
  
      initialize: function () {
          this.model.bind('destroy', this.destroyItem, this);
          this.model.bind('remove', this.removeItem, this);
      },
  
      render: function () {
          return $(this.el).append(this.template(this.model.toJSON())) ;
  
  
      }
  })
  
  
  Contact.Router = Backbone.Router.extend({
      routes: {
          "": "defaultRoute"
      },
  
      defaultRoute: function () {
          console.log("defaultRoute");
          Contact.employees = new Contact.Collections.Employees();
  
          new Contact.Views.Employees({ collection: Contact.employees }); //Add this line
  
          Contact.employees.fetch({
          error:function(response, xhr){
              console.log(response);
              console.log(xhr)
          },
          success:function(){
              console.log("success");
          }
      });
          console.log(Contact.employees.length)
      }
  })
  
  var appRouter = new Contact.Router();
  
  Backbone.history.start();
  </code></pre>
  
  <p><strong>And finally the json:</strong></p>
  
  <pre><code>[
      {
    "contactId" : "345345234",
    "employees" : [ {
      "employeeId" : "EE-00000001",
      "employeeName" : "BubbA Ho-tep",
      "employeeLegalFirstName" : "Bubba",
      "employeePrefFirstName" : "",
      "employeeLastName" : "Ho-tep",
      "employeeMaritalStatus" : "Single",
      "employeeBirthYear" : "1942",
      "employeeJobTitle" : "",
      "employmentStatus" : "Active",
      "employmentTerminationDte" : "",
      "employeeReferenceCode" : "EE1",
      "employeeDivision" : "HR",
      "employeeLocation" : "Downtown",
      "employeeEmail" : "bubba.hotep@greatmovies.com",
      "employer" : {
        "employerId" : "ER-00000001",
        "employerName" : "Initech"
      }
    } ]
  }
  ]
  </code></pre>