Fetch Subset of Backbone Collection with Unique Model URL (Code & Live Example Inside)

Question

I'm looking to fetch a subset of a backbone collection using the model's URL. Similar to the tutorial of "Nested Collections" found at:

http://liquidmedia.org/blog/2011/01/backbone-js-part-1/

Since this requires data api, models, collections, views i've included my full code of what Im trying to create:

Code (In Node/Mongoose/Express/Rest): https://github.com/1manStartup/Backbone-URLRoot

Live Example (on my ec2): http://54.251.104.185/ I believe my problem lies somewhere with the rendering of views and fetching of model data.

What Im Trying To Do: Render all Articles Unique to Dog. Route Is: /api/makearticle/:id

If you don't use NodeJs, my JSON Api looks like this:

{
    "articlename": "feed chocolate",
    "_dog": {
      "name": "pitbull",
      "_id": "51d0b9ad6fd59c5059000002"
    },
    "_id": "51d0c22a6fd59c5059000007",
    "__v": 0
  },
  {
    "articlename": "took to vet",
    "_dog": {
      "name": "chihuaha",
      "_id": "51d0b9af6fd59c5059000003"
    },
    "_id": "51d0c22e6fd59c5059000008",
    "__v": 0
  },

Here are my models and Collections: Rest of backbone code found at: https://github.com/1manStartup/Backbone-URLRoot

https://github.com/1manStartup/Backbone-URLRoot/blob/master/public/javascripts/demo-routerurl.js

Dog = Backbone.Model.extend({
  idAttribute: '_id',
  urlRoot:'/api/makedog' ,
      initialize:function () {
        this.dogs = new Dogs();
        this.dogs.url = this.urlRoot + "/" + this.id ;
    }   
});

Dogs = Backbone.Collection.extend({
    model: Dog,
    url: '/api/makedog' 
});

Article = Backbone.Model.extend({
  idAttribute: '_id',
  urlRoot:'/api/makearticle' ,
      initialize:function () {
        this.merr = new Articles;
        this.merr.url = this.urlRoot + "/" + this.id ;
    } 
});

Please Help ive been on this for several days. Thanks.

This seems to be more of an API issue: you need an API endpoint (e.g. /api/dogs/3/articles) that will return the list of articles related to a given dog. Then, simply load that data in a collection and use a collection/composite view to display. — David Sulc
Thanks for your reply. With my current API im able to display a list of all the articles in a collection. Also created a route like /api/dogs/:id where :id is used to identify which dog's articles are shown. Im probably having trouble in the fetching part in that im only able to render the full collection instead of the single model's collection defined by the url :id. — 1ManStartup
What does your API return for /api/dogs/:id ? In your code above, the articles for SEVERAL dogs seem to be returned... — David Sulc
When I do /api/dogs I get all the articles for several dogs. If I hard code for example /api/dogs/51d0b9ad6fd59c5059000002 I get only the articles to that specific dog, it works when getting just the json and it also displays in the collectionview, but this is not ideal to hard code if i plan to have hundreds of 'dogs'. — 1ManStartup

David Sulc David Sulc · Accepted Answer · 2013-07-01T19:02:14

Your API doesn't seem RESTful, so you're probably causing yourself more trouble than necessary: Backbone expects a RESTful API by default.

In any case, you need to do something like

var Article = Backbone.Model.extend({
  idAttribute: '_id'
});

var ArticleCollection = Backbone.Collection.extend({
  model: Article
});

var Dog = Backbone.Model.extend({
  idAttribute: '_id',
  initialize:function () {
    this.articles = new ArticleCollection({
      url: "api/dogs/" + this.get('id');
    });
  }   
});

Then, you can do (e.g.):

var doggy = new Dog({id: 51d0b9ad6fd59c5059000002});
doggy.articles.fetch();
var articlesForDoggy = doggy.articles;

As a side node, why are you creating a new collection of dogs each time you instanciate a new dog model instance?

Also to be noted: I would seriously rething your API design. If you're using different routes for creating models (which seems to be indicated by the 'make...' routes), you're going to have to write a whole bunch of code to get the Backbone persistence layer to work with your API.

In addition, this API doesn't really follow conventions: api/dogs/XXX shouldn't be returning a list of articles: it should be returning the dog instance with id XXX. Using a URL like api/dogs/XXX/articles would make a lot more sense for the list of articles associated with a dog.

Friendly advice: although the code above should get you on your way, you really should rethink how you're designing your API. Using a non-RESTful API with Backbone, coupled with non-standard naming conventions will basically guarantee you'll be entering a world of pain with your project.

Fetch Subset of Backbone Collection with Unique Model URL (Code & Live Example Inside)

1 Answers