Question

I have a collection of user models that starts with basic data:

[
 {'_id': 1, 'username': 'Jamie', 'image': 'jamie.jpg'},
 {'_id': 2, 'username': 'Andrew', 'image': 'andrew.jpg'},
 {'_id': 3, 'username': 'Kerry', 'image': 'kerry.jpg'}
];

but when a user clicks on the collection models view I load more data into the model so then I can create a profile view of the data:

{
 '_id'      : 1,
 'username' : 'Jamie',
 'image'    : 'jamie.jpg',
 'age'      : 21,
 'country'  : 'UK'
};

I have set it up so that when the full profile data has been loaded it wont be fetched again to save on GET requests.

However I have a refresh button on the main users view so and when I refresh the data all the loaded profile data is gone and I am required to make GET requests to get the information back.

I was wondering how I would go about solving this problem.

More details:

The purpose of the refresh button is to add new online users. I want this button so users who want to see new data will use this instead of refreshing the whole page.

The problem with wiping the loaded data is when a user goes back to the profile (which will happen a lot because I am going to add the ability to chat on each profile which requires the user to be on that users profile) there is an unnecessary GET requests because the data has already been loaded previously in the users session.

Answer 1

Running .fetch({add:true}) would avoid overwriting existing models, but then you’d be left with duplicates. To weed out duplicates and add new models to the collection, you’ll need to combine .fetch({add:true}) with a custom parse() function:

parse: function(response) {

  var client_ids = _.map(allUsers,function(user){ return user.get('id'); });

  response = _.filter(response,function(user){
    // true if user is not already in collection
    return _.indexOf(client_ids,user.id) < 0; 
  });

  return response;
}

I don’t have any way to test this right now, so please try it out and let me know if it works.