Dynamically load my 'IDs' into my Backbone Collection?

Question

Ok, I have got this working with answers posted on another question here, but I am trying to do something a little more. I have a Backbone set up as follows,

var MyModel= Backbone.Model.extend();

var MyCol = Backbone.Collection.extend({
model : MyModel,
url: '/GetData/2',
parse: function(response) {
  return response;
    }
});

var stuff = new MyCol;

stuff.fetch({
   success: function (collection, response) {
        console.log(response);
   }
})

Now this code fully works. Now to explain, the URL is set with PHP Slim, which returns JSON encoded data, where will be four key/pair groupings, for example:

<code> { id; XX, data: XX, another:XX, last:YY } </code>

This data is being received form a database, now how should I do this dynamically? By that I mean that on the URL' line in my collection, it passes 2 as the current ID. How can I get backbone to call each ID I need, there are currently 6 listing in the database. So I need it display/console log (currently for testing) all 6 inputs, so how would I change that ID input to 1-6? Should I just use a for loo? I really want something that will not need to change if say lists are removed form the database or more are added?

The end aim is for this JSON data is for it to load into my Backbone view, which is a template for a form.

All help most welcome,

Thanks

Glenn

P.S Sorry if my spelling is off I am dyslexic, also may not have explained things right, so let me know and I will improve my wording, thanks.

EDITS

This is what I am working with now ::

 var AdminModel = Backbone.Model.extend({
   defaults: {},
   urlRoot: '/GetData'

 });

 var AdminColModel = Backbone.Collection.extend({
model : AdminModel,
url: '/',
parse: function(response) {
  //console.log(response);
  return response;
    }
});

 var stuff = new AdminColModel;

  stuff.fetch({
    success: function (collection, response) {
     console.log(collection);
   } 
 })

This does not console log anything at all? But the PHP is set up and working fine, so when you go to /getData you get a whole list if all the rows in the database. When you view /getData/X <- X is the id number, that will return just that rows ID data.

Glenn

Answer 1

You should not make an individual request for each model in your collection at the collection level. The url you have set for your collection should request all of the models by default. So instead of it being:

 '/GetData/2'

It should instead be:

 '/GetData'

Then on the server side you should ensure that the GetData action returns all MyModels.

You can then write overrides for GetData that take parameters to either return an individual model, or filter the results. You will be particularly interested in the individual model retrieval, which should be the URL used at the model level. in fact, you already have this action, as you are using it (incorrectly) to retrieve the collection. This is the action associated with the /GetData/2 URL. This action should be the one used when you call fetch inside the model, not the collection.

Hopefully this helps.

Post Edit

Adding some code to assist.

var AdminModel = Backbone.Model.extend({
    urlRoot: '/GetData'
});

var AdminCollection = Backbone.Collection.extend({
    model : AdminModel,
    url: '/GetData'
});

var wholeCollection= new AdminCollection();

// the fetch method on the collection uses the AdminCollection.url property
wholeCollection.fetch({
    success: function (collection) {
        console.log(collection); // will output collection object to console
    } 
});

// this model does not exist in any collection
var modelOutsideCollection = new AdminModel({}, { id: "2" });

// because the model is not in a collection, fetch uses the AdminModel.urlRoot proeprty
modelOutsideCollection.fetch({
    success: function (model) {
        console.log(model); // outputs a single model with id of 2 to collection
    } 
}); 

Answer 2

So... The way you seem to be doing things is going to make it really hard (if even possible) to work with Backbone.

What you should have is an API endpoint (e.g.) "getData" that will return all models:

[
  {id: 1, name: "asdflj"},
  {id: 2, name: "lsdfkjg"},
  // etc.
]

Then, you define "getData" as the collection's url. For each model in the collection, Backbone will automatically compute the model instance's url as (e.g.) "getData/2" (if the model's id is 2).

In other words, you'd need to change your API to have:

• getData -> return all models
• getData/2 -> return model with id 2