I recently upgraded my Backbone application to the 1.0 version of the library. When I ran the application, the Backbone View was not rendering anything on the browser screen. I noticed the XHR request being sent in the Network tab of Chrome Dev Tools. This meant that the Collection was fetching the data from the server. However, the 'render' function defined in Backbone View was not being called, which was attached as a callback handler for the 'reset' event on the Collection.
Here's the sample code:
I had a quick look at the Backbone documentation and came across the section 'Upgrading to 1.0'. The very first point there mentions that the 'reset' event is not triggered by default when the Collection is populated with data. One has to pass the key - 'reset' with value true when making a fetch call on the Collection. Now I had to update the code at places where the fetch call was being made. However, this can be avoided by making changes in the Collection. There are two ways of doing this: overriding the fetch method and resetting the collection in parse method. Let's see both of them:
Overriding the fetch method:
Here's the sample code:
I had a quick look at the Backbone documentation and came across the section 'Upgrading to 1.0'. The very first point there mentions that the 'reset' event is not triggered by default when the Collection is populated with data. One has to pass the key - 'reset' with value true when making a fetch call on the Collection. Now I had to update the code at places where the fetch call was being made. However, this can be avoided by making changes in the Collection. There are two ways of doing this: overriding the fetch method and resetting the collection in parse method. Let's see both of them:
Overriding the fetch method:
The fetch method is overridden here and as you can see from the above code, the 'reset' key is added to options and then the fetch method defined on the Backbone Collection's prototype is called.
Resetting the Collection in parse:
Whenever a response is received from the server, the parse method is called before sending a notification to the listeners. Here you can call the reset method passing the response as an argument. The Collection now has been reset with the data received from the server and View will receive a reset event.
Whenever a response is received from the server, the parse method is called before sending a notification to the listeners. Here you can call the reset method passing the response as an argument. The Collection now has been reset with the data received from the server and View will receive a reset event.
great, i am stucked with this problem.
ReplyDeletecollection.fetch({reset: true}) ?
ReplyDelete@Opeyemi Obembe , the approach that I've mentioned here assumes that all the fetch calls should reset the collection. If you want this to happen only in a particular instance then 'reset': true, should do the job.
ReplyDeleteI was stuck on this for an hour, thanks a lot!!! I'd buy you a beer if I could.
ReplyDelete@Jashua Gupta, glad that this post helped. Beer? Sure :) You can also see my wishlist here - http://www.flipkart.com/wishlist/Sagar_Ganatra
ReplyDeleteHaha, nice! Do you have an Amazon account? If so, I'll send you a Kindle version of one of these. I read other posts on your blog, and it's a great resource for Backbone beginners! I especially found the one on mvvm with stickit very helpful. Kudos and many thanks!
ReplyDelete