Get /collection/id in backbone without loading the entire collection

Question

Is there a way to load a single entity of a Backbone collection (from the server)?

Backbone.Collection.extend({
  url: '/rest/product'
});

The following code can load the entire collection with a collection.fetch() but how to load a single model? Backbone's documentation says clearly that GET can be done /collection[/id] but not how.

score 9 · Answer 1 · answered Jun 07 '11 at 09:49

9

The model has to be declared that way:

Backbone.Model.extend({
  url: function() {
    return '/rest/product/'+this.id;
  }
});

Using it is simple as:

var model = new ProductModel();
model.id = productId;
model.fetch({ success: function(data) { alert(JSON.stringify(data))}});

answered Jun 07 '11 at 09:49

yves amsellem

7,106
5
44
68

Are you sure it's ok to use `model.id = productId` instead of `model.set('id', productId)`? – SimplGy May 23 '13 at 17:22
Yep, sure. The model uses this.id which is not a backbone attributes. Using model.set('id', ..) requires to use model.get('id') in his proper class. Both works, mine won't interfere with the backbone model attributes :D – yves amsellem May 24 '13 at 08:43

score 7 · Accepted Answer · answered Aug 05 '12 at 22:12

7

While we set

url:"api/user"

for the collection, the equivalent for the model is

urlRoot:"api/user"

this will make backbone automatically append the /id when you fetch()

answered Aug 05 '12 at 22:12

j040p3d20

350
4
7

score 4 · Answer 3 · edited Sep 20 '11 at 14:19

4

collection.fetch( {data: { id:56 } } )

edited Sep 20 '11 at 14:19

Jason Plank

2,336
5
31
40

answered Sep 20 '11 at 08:08

Álvaro García

431
2
7

Works as expected +1. But it gives me error after the execution of above line. `Uncaught TypeError: object is not a function `. Can you help? – Shubh Dec 01 '13 at 18:38

score 1 · Answer 4 · answered Dec 20 '12 at 06:01

I did this:

Catalog.Categories.Collection = Backbone.Collection.extend({
fetchOne : function (id, success) {
    var result = this.get(id);
    if (typeof result !== 'undefined') {
        console.log(result, 'result')
        success.apply(result);
        return;
    }
    var where = {};
    where[this.model.prototype.idAttribute] = id;
    var model = new this.model(where);
    this.add(model);
    console.log(this._idAttr, where, this.model)
    model.fetch({success: function () {
        success.apply(model);
    }});
}
};

Now call it:

collection.fetchOne(id, function () {console.log(this)});

No more guessing if the model is already in the collection!. However, you have to use a call back as you can't depend on an intimidate result. You could use async false to get around this limitation.

This works better and can easily be added to Backbone's collection prototype — MrFoh, Jan 24 '13 at 08:22

Raynos · Answer 5 · 2011-06-07T09:44:56.197

0

just .fetch a Model.

So create a model with it's own .url function.

Something like

function url() {
  return "/test/product/" + this.id;
}

edited Jun 07 '11 at 09:44

answered Jun 07 '11 at 09:23

Raynos

166,823
56
351
396

The following code does not work: `url: '/rest/product/'+this.id` – yves amsellem Jun 07 '11 at 09:35
@yvesamsellem after reading more carefully, `.url` needs to be a function – Raynos Jun 07 '11 at 09:46
@Raynos thanks. Is there a way to not repeat the url in the model and the collection? – yves amsellem Jun 07 '11 at 09:51
@yvesamsellem The only way I can think is to extend the collection. With lazy loading functionality – Raynos Jun 07 '11 at 09:58
@Raynos can you please complete your answer with a sample of code? – yves amsellem Jun 07 '11 at 10:10
@yvesamsellem That's not simple functionality to implement. I might have a go at it later. – Raynos Jun 07 '11 at 10:16

score 0 · Answer 6 · answered Jun 21 '11 at 07:17

I did this:

var Product = Backbone.Model.extend({});
var Products = Backbone.Collection.extend({
  model: Product,
  url: '/rest/product'
});
var products = new Products();
var first = new Product({id:1});
first.collection = products;
first.fetch();

This has the advantage of working when you're not using a REST storage engine (instead, using something like the HTML5 Local storage, or so forth)

Get /collection/id in backbone without loading the entire collection

6 Answers6

Linked