How do I fetch a single model in Backbone?

Question

I have a Clock model in Backbone:

var Clock = Backbone.Model.extend({});

I'm trying to get an instance of that that has the latest information from /clocks/123 . Some things I've tried:

a "class"-level method

Clock.fetch(123)
// TypeError: Object function (){ ... } has no method 'fetch'

creating an instance and then calling fetch on it:

c = new Clock({id: 123})
c.fetch()
// Error: A 'url' property or function must be specified

a collection

I tried creating an AllClocks collection resource (even though I have no use for such a thing on the page):

var AllClocks = Backbone.Collection.extend({
  model: Clock,
  url: '/clocks/'
});
var allClocks = new AllClocks();
allClocks.fetch(123);
// returns everything from /clocks/

How do I just get one API-backed Clock?

Answer 1

Try specifying urlRoot in the model:

From the docs:

var Book = Backbone.Model.extend({urlRoot : '/books'});
var solaris = new Book({id: "1083-lem-solaris"});
solaris.fetch();

Answer 2

Your second approach is the approach I have used. Try adding the following to your Clock model:

url : function() {
  var base = 'clocks';
  if (this.isNew()) return base;
  return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
},

This approach assumes that you have implemented controllers with the hashbang in your URL like so, http://www.mydomain.com/#clocks/123 , but it should work even if you haven't yet.

Answer 3

I personally recommend, following the Model#url method documentation

model = new Model(id: 1)
view = new View(model: model) 
collection = new Collection([model])
model.fetch()

in your collection remember to add the collection url:

url: "/models"

and in your View's initialize function do:

this.model.bind("change", this.render)

this way backbone will do an ajax request using this url:

"/models/1"

your model will be updated and the view rendered, without modifying Collection#url or Model#urlRoot

note: sorry this example came out in coffee script, but you can easily translate it to js adding var statements

Answer 4

var Person = Backbone.Model.extend({urlRoot : '/person/details'});
var myName = new Person({id: "12345"});
myName.fetch();

As a result you make a Ajax request on the

URL http://[domainName]/person/details/id 

and you have the JSON response back.

Enjoiiii !!!

Answer 5

...and do this if you don't want the trailing slash on the model urlRoot:

    url : function() {                        
        return this.urlRoot + this.id;
    },

Answer 6

You probably should be accessing the object trough a collection and keeping it in the collection all the time. This is how to do it:

var AllClocks = Backbone.Collection.extend({
  model: Clock,
  url: '/clocks/'
});

var allClocks = new AllClocks();
my_clock = allClocks.add({id: 123});
my_clock.fetch()

Answer 7

I want to use RESTful url,but I couldn't understand why 'postId' can't be added to base url.

var PostModel = Backbone.Model.extend({
    urlRoot: 'getBlogPost',
    defaults: {
        postTitle: "defaultTitle",
        postTime: "1970-01-01",
        postContent: "defaultContent",
        postAuthor: "anonymous"
    }
});

var post = new PostModel({
            postId: 1
        });
alert(post.url());

Then I know only after I set 'idAttribute' as 'postId' in Model can I get the right url. like this:

var PostModel = Backbone.Model.extend({
    idAttribute: 'postId',
    urlRoot: 'getBlogPost',
    defaults: {
        postTitle: "defaultTitle",
        postTime: "1970-01-01",
        postContent: "defaultContent",
        postAuthor: "anonymous"
    }
});