javascript - Cascading Select Boxes with Backbone.js -
i'm found useful link http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
how populate these restful response 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 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) { // nothing - } }); 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 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>
Comments
Post a Comment