1

I have a model named TodoModel and a collection named Todos. The url that I use to fetch data is an external api, hence I am overriding my collection's url function as

url:function(){
    return "http://abc.com/data"
}

This works fine when I write Todos.fetch() from my view.

Now, I want to pass some parameters like http://abc.com/data/[id].

On click of every element there will be a different api call with different ids. For example:

  • http://abc.com/data/123
  • http://abc.com/data/234

How do I achieve this?

Should I set the url of my model to this external url? How should I go about this problem?

Rob Hruska
  • 118,520
  • 32
  • 167
  • 192
Sudo
  • 559
  • 1
  • 8
  • 15

2 Answers2

3

If you set the ids on your models in the collection, the sync will work automatically. For example, if you have a Todo model with an id of 123, and save() it, it'll POST to http://abc.com/data/123.

From the Collection.url docs:

Models within the collection will use url to construct URLs of their own.

From the Model.url docs:

Generates URLs of the form: "/[collection.url]/[id]", falling back to "/[urlRoot]/id" if the model is not part of a collection.

See Backbone's sync documentation to see how the HTTP methods map to various URLs on models within a Collection.

Rob Hruska
  • 118,520
  • 32
  • 167
  • 192
1

Yes, I would set the url on both the model and the collection.

Todo = Backbone.Model.extend({
  url : function () {
    var base =  "http://abc.com/data/";
    if (this.isNew()) {
      return base;
    } else {
      return base + this.get("id");
    }
  }
});
Andrew Hubbs
  • 9,338
  • 9
  • 48
  • 71
  • You shouldn't have to set the url on the models like this if the collection's URL is set and the models are using ids. From the [Backbone Collection](http://backbonejs.org/#Collection) docs: *"Models within the collection will use url to construct URLs of their own"*, and from the [Model](http://backbonejs.org/#Model-url) docs: *"Generates URLs of the form: "/[collection.url]/[id]", falling back to "/[urlRoot]/id" if the model is not part of a collection."* – Rob Hruska Dec 04 '12 at 18:48
  • Hi,In this case... do I need to do Todo.fetch()? – Sudo Dec 04 '12 at 18:54
  • Hi Rob, So how do I pass just the id? If it takes the collection url by default, and I wish to append some more data to that url, how am I supposed to do that with model? – Sudo Dec 04 '12 at 18:56
  • Can you perhaps provide an example in your question about the data you're trying to sync and/or the parameters you're trying to add to the URL? – Rob Hruska Dec 04 '12 at 19:03
  • The api resonse on the initial collection fetch gives me response like this: link:"data/Suchita" device_name:"" name:"Suchita" – Sudo Dec 04 '12 at 19:05
  • It's still not completely clear to me what the interactions are here. However, it looks like the API isn't quite lining up with the models you're coding. You may need to look into overriding `sync()`, [`parse()`](http://backbonejs.org/#Model-parse), and/or [`toJSON()`](http://backbonejs.org/#Model-toJSON) if you need more flexibility beyond the default REST interaction. – Rob Hruska Dec 04 '12 at 19:18
  • Hi, I am sorry the comment was incomplete... so here is what i get hte response when : link:"data/Suchita" device_name:"" name:"Suchita". This is only one response, i get 10 of such kinds with different names and links. Now, when the user clicks on any of these, the 'link' attribute needs to be appended to the external api. This will be a GET request which returns me only data of one particular model i.e. the link now becomes http://abc.com/data/Suchita which retuerns me data of that particular url. – Sudo Dec 04 '12 at 19:58
  • In that case, @AndrewHubbs' answer may help you more - you can customize the URL to use the name property instead of id, if that's what you're after. – Rob Hruska Dec 04 '12 at 20:59