Backbone.js collection options

Question

I have written a model/view/collection using Backbone.js. My collection uses the fetch method to load the models from a remote server. The url required for this collection needs an id like: messages/{id}. But I have found no clean way to pass options to the Collection.

The backbone.js view accepts options by passing it on construction: view([options]), but the collection expects a list of models upon construction: collection([models]).

What is the "cleanest" way of passing parameters/options to this collection?

Shortened code:

var Messages = Backbone.Collection.extend({
 model: Message,
   url: 'http://url/messages/' + id
});

maybe using relative url is a better idea too ? – malletjo Dec 11 '11 at 15:57 — malletjo, Dec 11 '11 at 15:57

score 109 · Accepted Answer · answered Dec 11 '11 at 16:51

@Paul's answer is good, but it's also worth noting that the url attribute can be a function. In my opinion (and it's just opinion, since the end result is the same), the code is a little more legible, if more verbose, if you set the id in initialize and the reference it in a function:

var Messages = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.id = options.id;
  },
  url: function() {
    return '/messages/' + this.id;
  },
  model: Message,
});

var collection = new Messages([], { id: 2 });
collection.fetch();

Just to make sure, though - you aren't confusing the id here with the Model id, are you? @Paul's answer, and my code above, assume that you have multiple Messages collections, each with its own id. If the API path /messages/<id> actually refers to a message, not a set of messages, then you only need to set the url to /messages/ in the Collection, and Backbone will automatically use /messages/<id> for each model.

Thank you `Nick` for such a simple and clear example. I wish I could have seen your answer, I would have saved a day.... Thank again. — Shubh, Dec 01 '13 at 18:53
Yes, this results in undefined for me. The answer below works. — zeros-and-ones, Nov 07 '16 at 21:38

Paul · Answer 2 · 2011-12-11T16:37:13.333

The way you have the url property declared, the value will be determined once when the browser initially loads the javascript file, and 'id' will be undefined.

The Backbone.Collection accepts options as the second argument in its constructor, so you can pass the id value as an option, and then set the url value within the initialize function of the collection.

Here's an example

var Messages = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.url = 'http://url/messages/' + options.id;
  },
  model: Message,
});

var collection = new Messages([], { id: 2 });
collection.fetch();

Backbone.js collection options

2 Answers2

Linked