Cascading Select Boxes with Backbone.js

问题:

I'm found this useful link http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/

How do I populate the these restful response to the continent select tag:

{"_count":6,"data":[{"id":"6","continent":"NORTH AMERICA","code":"NA","sort_order":"6","published":"1","date_created":"2014-02-02 13:16:54","createdbypk":"1","date_modified":"2014-02-02 21:17:10","modifiedbypk":"1"},{"id":"1","continent":"ASIA","code":"AS","sort_order":"1","published":"1","date_created":"2014-02-02 12:31:42","createdbypk":"1","date_modified":"2014-02-02 21:16:31","modifiedbypk":"1"}]}

Here is my js code:

$(function () {
     var Continent = Backbone.Model.extend();
     var Country = Backbone.Model.extend();
     var Continents = Backbone.Collection.extend({
         url: BASE_URL + 'api/continents',
         model: Continent
     });
     var Countrys = Backbone.Collection.extend({
         model: Country
     });
     var LocationView = Backbone.View.extend({
         tagName: "option",
         initialize: function () {
             _.bindAll(this, 'render');
         },
         render: function () {
             console.log(this.model);
             $(this.el).attr('value', this.model.get('id')).html(this.model.get('continent'));
             //attr('value', this.model.get('id')).
             //$(this.el).html(this.model.get('continent'));
             return this;
         }
     });
     var LocationsView = Backbone.View.extend({
         events: {
             "change": "changeSelected"
         },
         initialize: function () {
             _.bindAll(this, 'addOne', 'addAll');
             this.collection.bind('reset', this.addAll);
         },
         addOne: function (continent) {
             $(this.el).append(new LocationView({
                 model: continent
             }).render().el);
         },
         addAll: function () {
             this.collection.each(this.addOne);
         },
         changeSelected: function () {
             this.setSelectedId($(this.el).val());
         }
     });
     var ContinentsView = LocationsView.extend({
         setSelectedId: function (countryId) {
             this.countrysView.collection.url = BASE_URL + "api/country/id/" + countryId;
             this.countrysView.collection.fetch();
             $(this.countrysView.el).attr('disabled', false);
         }
     });
     var CountrysView = LocationsView.extend({
         setSelectedId: function (countryId) {
             // Do nothing - for now
         }
     });
     var continents = new Continents();
     var continentsView = new ContinentsView({
         el: $("#continent"),
         collection: continents
     });
     var countrysView = new CountrysView({
         el: $("#country"),
         collection: new Countrys()
     });
     new LocationsView({
         el: $("#continent"),
         collection: continents
     });
     new LocationsView({
         el: $("#country"),
         collection: new Countrys()
     });
     continents.fetch();
 });

Here is my form

<form>
 Continent:<select id="continent"><option value=''>Select</option></select>
 Country:<select id="country" disabled="disabled"><option value=''>Select</option></select> 
 Company:<select id="company" disabled="disabled"><option value=''>Select</option></select>
</form>