Backbone.js Table - Separate URLs for table structure and underlying data

Question

I am a novice to Backbone.js. I am trying to create a UI where I have multiple tables. There are 2 separate URLs that provide data in JSON format. 1st url gives the structure of the table,i.e., the column headers, the width, a corresponding dbfield name where the data in the table will come from. The 2nd url gives the data for a table. This url takes an id as parameter that is available in the first url. So for eg., there are 4 tables then the 1st url will give the structure details of all the 4 tables and the 2nd url will need to be called 4 times for the different id's for the tables and rendered.

Any suggestions on how to do this using Backbone.js. I have been able to work with the 1st url and create the 4 tables but need help on how to add the data from the 2nd url to the table by looping thru the 1st collection and calling the 2nd url.

Appreciate any assistance with this.

thanks.

Following is the backbone code I use to get the data from 1st url and pass it to my template to generate the html. One of the fields coming in this data is a parameter for the 2nd url.

var mModel = Backbone.Model.extend();

var Collection = Backbone.Collection.extend({
    model: mModel,
    url: 'http://xyz.com/sendjson',

    initialize: function () {
        this.deferred = this.fetch();
    }
});

var View = Backbone.View.extend({
    render: function () {

        var collection = this.collection;

        collection.deferred.done(function () {

            var template = _.template($('#template').html(),
            {
                Collection: Collection
            });
            $('#main').html(template);
        });
    }
});

var myCollection = new Collection();

var myView = new View({
    collection: myCollection
});

myView.render();

Answer 1

Ok here is what I came up with. It uses two separate collections. I tested this locally and it worked for me.

       var mUrl = '/sendjson'
       var iUrl = '/senditem'

       var mCollection, iCollection

       var MModel = Backbone.Model.extend({})
       var IModel = Backbone.Model.extend({urlRoot: iUrl})

       var IView = Backbone.View.extend({
           template: '<%= mModel.color %><%= iModel.name %>',
           render: function() {
               var html = _.template(this.template, {
                   mModel: this.mModel.toJSON(), 
                   iModel: this.iModel.toJSON()
               })
               this.$el.html(html)
               return this
           }
       })

       var MCollection = Backbone.Collection.extend({
           model: MModel,
           url: mUrl
       });

       var ICollection = Backbone.Collection.extend({
           initialize: function(app, ids) {
               var self = this
               _.each(ids, function(id) { 
                   var iModel = new IModel({ id: id })
                   self.add(iModel)
                   app.listenTo(iModel, 'sync', function() {
                       var view = app.mCollection.get(iModel.id).view
                       view.iModel = iModel
                       app.$el.append(view.render().$el)
                   });
                   iModel.fetch()
               });
           }
       });

       var App = Backbone.View.extend({
           el: '#main',

           initialize: function() {
               this.mCollection = new MCollection()
               var app = this

               this.mCollection.on('sync', function () {
                   app.mCollection.each(function(mModel) {
                       var iview = new IView()
                       iview.mModel = mModel
                       iview.iModel = new IModel
                       mModel.view = iview
                   })
                   app.render()
                   var items = new ICollection(app, 
                      app.mCollection.map(function(mModel) {
                      return mModel.get("parent").child1.child2.id;
                   });

               this.mCollection.fetch();
           },

           render: function () {
               var that = this
               this.mCollection.each(function(mModel) { 
                   that.$el.append(mModel.view.render().$el) 
               });
           }
       });