Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Backbone Collections do not emit 'reset' event after fetch

DZone's Guide to

Backbone Collections do not emit 'reset' event after fetch

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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:

var App = {};

App.BBCollection = Backbone.Collection.extend({

	initialize: function (options) {
		console.log('Collection - initialize');
	}

});

App.BBView = Backbone.View.extend({
			
	initialize: function () {
		
		console.log('View - initialize');
		
		// Create an instance of a BBCollection
		var BBCollectionInstance = new App.BBCollection();
		
		// Call fetch on the collection instance
		BBCollectionInstance.fetch({
			error: this.errorHandler,
			url: 'sampleData.json'					
		});

		/*
		 * listen to the reset event on the collection and 
		 * call render when the collection changes.
		 * However, reset is not triggered by default, the fetch
		 * method should pass the key 'reset' as true.
		*/
		this.listenTo(BBCollectionInstance, 'reset', this.render);
	},

	render: function (collection) {
		
		console.log('View - render');

		console.log(collection.toJSON());
	},

	errorHandler: function (error) {
		
		console.log('View - errorHandler');
		
	}

});

new App.BBView();

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: 
fetch: function (options) {
	options.reset = true;
	return Backbone.Collection.prototype.fetch.call(this, options);
}
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:
parse: function (response) {
	console.log('Collection - parse');
	this.reset(response);				
},
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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}