Backbone relational lazy loading

Question

I'm using Backbone with my RESTful JSON API in order to create an app that works with posts and their comments. I've been trying to get Backbone Relational to work, but run into problems with my Lazy loading.

I load up a list of posts, without the related comments. On click of an post in the list, I open up a view that fetches the full Post, comments included, and renders this.

I've got 2 Backbone.RelationModels, Posts and Comments. The post relation to the comment is setup as folows:`

relations: [{
            type: Backbone.HasMany,
            key: 'comments',
            relatedModel: 'Comment',
            includeInJSON: true, // don't include it in the exporting json
            collectionType: 'Comments'
        }]

Now the problem I'm facing is that the relationships are initialized as soon as I retrieve my list, that do not contain the comments yet. I load up the full data later, by fetching the model by it's URI. However, the relationships don't seem to reinitialise, calling Posts.get(1).get('comments') returns a Comments collection that is empty!

Does anyone know how I could best tackle this problem? The data is there, it just seems the collection of the comments doesn't gets updated.

Edit: I can make the Post model bind it's change:comments to itself, which updates the collection. However, I can't seem to find a solid way to get the original comments' JSON, since this.get('comments') returns the Comments collection.

Note: In my collection, I do parse the JSON to make it work with my API, with the following code:

parse: function(response) {
        var response_array = [];
        _.each(response, function(item) {
            response_array.push(item);
        });

        return response_array;
    }

This is because the JSON returned by my API returns an object with indexed keys (associative array) instead of a native JSON array.

{
    "id" : "1",
    "title" : "post title",
    "comments" : {
        "2" : {
            "id" : "2",
            "description": "this should solve it"
        },
        "6" : {
            "id" : "6",
            "description": "this should solve it"
        }
    }
}

Thanks a bunch! Please ask any questions, I'm sure I've been vague somewhere!

score 3 · Answer 1 · answered Sep 12 '11 at 19:06

The Backbone Relational model doesn't parse collections other then arrays, the JSON from my question didn't work. I changed the backend to return the comments in a proper array

{
    "id" : "1",
    "title" : "post title",
    "comments" : [
        {
            "id" : "2",
            "description": "this should solve it"
        },
        {
            "id" : "6",
            "description": "this should solve it"
        }]
    }
}

The RelationalModel doesn't respect the parse function that Backbone provides to parse your JSON before it moves on. With the backend returning "proper" JSON, the lazy loading works without any extra code.

score 1 · Answer 2 · edited May 01 '12 at 03:48

1

You can also use the initialize method on your comment model, to simulate the parse method and define attributes with custom values like this (CoffeeScript):

initialize: (obj) ->
  @attributes = obj.customKey

edited May 01 '12 at 03:48

Perception

79,279
19
185
195

answered Apr 30 '12 at 19:21

AdkJ

11
1

Backbone relational lazy loading

2 Answers2