CODEWITHSUNDEEP
backbone.jsfetch
Abhishek
Abhishek

Reputation: 1837

How does collection.fetch({add:true}) work?

I added a model to my collection and did model.save The data gets saved on the server.

After this I call collection.fetch({add:true}). Ideally only one model should be returned from server ie the newly added one but I'm seeing the entire collection being propagated back in chrome developers tool.

I'm confused. how does this actually work ?

Upvotes: 6

Views: 6875

Answers (2)

Loamhoof
Loamhoof

Reputation: 8293

As an add-on to Cyril N.'s answer (which describes essentially the default behavior, and should be enough I guess), I'd like to explain more thoroughly the role of the 3 flags:

  • add: whether or not Backbone should create and add to the collection the models which don't exist yet (ie, whose id are not in the collection)
  • remove: whether or not Backbone should remove from the collection the models which were not brought back from the server (ie, whose id were not is the brought back data)
  • merge: whether or not Backbone should update the models which are not in the first two categories (already in the collection, and brought back from the server)

However, I like to expand a bit further about the general behavior of the method (it uses the Collection#set method as a callback, so it's more the Collection#set's behavior). Backbone prepares the models, which means it creates fake, volatile models at the beginning of the method (they're only volatile if they're not added). This can lead to unexpected behaviors: because it creates models, the initialize method of those are executed.

Also, as a side-note, since Backbone 1.0, the Collection#reset flag was introduced if you want to reset your collection when fetching (therefore it uses this method as a callback). Before that, it was the default behavior of the Collection#fetch method.

Well, with both answers you should have every info you need I guess.

Upvotes: 14

Cyril N.
Cyril N.

Reputation: 39889

When you call collection.fetch({add:true}, Backbone will request the server with the complete list of items in the collection (hence the entire collection you see in the Chrome developers tool), but then, instead of reloading the entire collection in the Collection Object in Backbone (Javascript), Backbone will performs a "smart" update of the collection.

The set method performs a "smart" update of the collection with the passed list of models. If a model in the list isn't yet in the collection it will be added; if the model is already in the collection its attributes will be merged; and if the collection contains any models that aren't present in the list, they'll be removed. All of the appropriate "add", "remove", and "change" events are fired as this happens. If you'd like to customize the behavior, you can disable it with options: {add: false}, {remove: false}, or {merge: false}.

Source: http://backbonejs.org/#Collection-set

All the smart work is made client side, in Javascript, but for that, Backbone request the entire collection from the server to compare it with what it has in local (client side).

(I hope I'm clear ;)).

Upvotes: 4

Related Questions