BackboneJS collection.reset() vs collection.fetch()

Question

I have read and read the docs on these two methods, but for the life of me cannot work out why you might use one over the other?

Could someone just give me a basic code

Answer 1

We're assuming here that you've read the documentation, else it'l be a little confusing here.

If you look at documentation of fetch and reset, what it says is, suppose you have specified the url property of the collection - which might be pointing to some server code, and should return a json array of models, and you want the collection to be filled with the models being returned, you will use fetch.

For example you have the following json being returned from the server on the collection url:

[{
  id : 1, 
  name : "a"
 }, {
  id : 2, 
  name : "b"
 }, {
  id : 3, 
  name : "c"
 }]

Which will create 3 models in your collection after successful fetch. If you hunt for the code of collection fetch here you will see that fetch will get the response and internally will call either reset or add based on options specified.

So, coming back to discussion, reset assumes that we already have json of models, which we want to be stored in collection, we will pass it as a parameter to it. In your life, ever if you want to update the collection and you already have the models on client side, then you don't need to use fetch, reset will do your job.

Hence, if you want to the same json to be filled in the collection with the help of reset you can do something like this:

var _self = this;
$.getJSON("url", function(response) { 
  _self.reset(response); // assuming response returns the same json as above
});

Well, this is not a practice to be followed, for this scenario fetch is better, its just used for example.

Another example of reset is on the documentation page.

Hope it gives a little bit of idea and makes your life better :)

Answer 2

reset() is used for replacing collection with new array. For example:

@collection.reset(@full_collection.models)

would load @full_collections models, however

@collection.reset()

would return empty collection. And fetch() function returns default collection of model

Answer 3

reset sets the collection with an array of models that you specify:

collection.reset( [ { name: "model1" }, { name: "model2" } ] );

fetch retrieves the collection data from the server, using the URL you've specified for the collection.

collection.fetch( { url: someUrl, success: function(collection) {
    // collection has values from someUrl
} } );

---

Here's a Fiddle illustrating the difference.