Я нашел эту полезную ссылку http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
Как заполнить этот спокойный ответ на тег выбора континентов:
{"_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"}]} Вот мой код js:
$(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(); });.$(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(); });
Вот моя форма
<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>