title: Backbone.js nested model
body: <p>I am just starting to learn Backbone.js. How do i create a Backbone model for the following use case</p>
  
  <ul>
  <li>States:[0-n]
  <ul>
  <li>name     </li>
  <li>counties:[0-n] 
  <ul>
  <li>name</li>
  <li>cities:[0-n] 
  <ul>
  <li>name: </li>
  <li>parks[0-n]
  <ul>
  <li>name:</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Any help will is greatly appreciated.
  this is what i tries so far</p>
  
  <pre><code>window.Team = Backbone.Model.extend({
          initialize: function(){
            this.id = this.get('id');
          }
        });
        window.Teams = Backbone.Collection.extend({model:Team});
  
        window.Ward = Backbone.Model.extend({
          initialize: function(){
            this.name = this.get('name');
            this.code = this.get('code');
            this.teams = new Teams(this.get('teams'));
          }
        });
  
        window.Wards = Backbone.Collection.extend({model:Ward});
  
        window.LGA = Backbone.Model.extend({
          initialize: function(){
            this.name = this.get('name');
            this.wards = new Wards(this.get('wards'));
          }
        });
  
        window.LGAs = Backbone.Collection.extend({model:LGA});
  
        window.State = Backbone.Model.extend({
          initialize: function(){
            this.name = this.get('name');
            this.lgas = new Wards(this.get('lgas'));
          }
        });
  
        window.States = Backbone.Collection.extend({model:State,
  
          initialize: function(){
            _.bindAll(this, 'fetch_success');
            this.bind('change', this.fetch_success);
          },
  
          url: function(){
              return "data.json"
          },
  
          fetch_success:function(){
              var data = Backbone.Syphon.serialize(someViewWithAForm);
              var model = new Backbone.Model(data);
          }
        });
  </code></pre>
  
  <p>Thanks</p>