How do I fetch a single model in Backbone?

JavascriptModel View-ControllerRestbackbone.js

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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();

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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 !!!

Solution 5 - Javascript

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

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

Solution 6 - Javascript

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()

Solution 7 - Javascript

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"
	}
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJames A. RosenView Question on Stackoverflow
Solution 1 - JavascriptHernan S.View Answer on Stackoverflow
Solution 2 - JavascriptAndrew De AndradeView Answer on Stackoverflow
Solution 3 - JavascriptmakevoidView Answer on Stackoverflow
Solution 4 - JavascriptAnkit GargView Answer on Stackoverflow
Solution 5 - Javascript4m1rView Answer on Stackoverflow
Solution 6 - JavascriptssobczakView Answer on Stackoverflow
Solution 7 - JavascriptAraellView Answer on Stackoverflow