CODEWITHSUNDEEP
javascriptbackbone.js
Pablo Rincon
Pablo Rincon

Reputation: 1039

Backbone Response on Sync

First of all my knowledge of Backbone is very limited, and currently, I'm trying to add an implementation into some code I didn't create.

My problem is as follows:

I have a collection which is being rendered on click of a button. Now, we are setting some permissions on the website, so that sometimes the response I will get is a 401.

I'm currently able to get the response, the problem is that I don't know how to attach it to the sync event so that if I get a 401 when I call the API, it shouldn't render anything.

I would think looking at the code would help clarify my problem:

this.addressBook = new (Backbone.Collection.extend({
        url: url,
        model: Backbone.Model.extend({
            idAttribute: 'ID'
        }),

        parse: function(data) {

            return data;
        }
}))();

    this.addressBook.on('sync', this.renderAddresses, this);
    this.addressBook.fetch();

So I found a few ways to get the status code from fetch, but in this particular case, I need to get the status code before the sync event calls this.renderAddress, and given the status of the response, go ahead and render my view or simply display a message stating that access is denied.

Sorry if I'm not clear enough.

Thanks in advance.

Upvotes: 1

Views: 830

Answers (2)

mtl
mtl

Reputation: 7557

Here is the salient part of the backbone documentation:

Whenever a model or collection begins a sync with the server, a "request" event is emitted. If the request completes successfully you'll get a "sync" event, and an "error" event if not.

This means that the sync event shouldn't fire if you get a 401, rather the error event should be triggered.

You can test this in your code by listening to all the different events (all available parameters included):

this.listenTo(yourCollection, 'request', function(collection, resp, options) {
  console.log('Request: ', resp);
});
this.listenTo(yourCollection, 'error', function(collection, resp, options) {
  console.log('Error: ', resp);
});
this.listenTo(yourCollection, 'sync', function(collection, resp, options) {
  console.log('Sync: ', resp);
});

So you should be able to just listen to the error event to display your custom error message:

this.listenTo(yourCollection, 'error', function(collection, resp) {
  if (resp.status === 401) {
    console.warn('401: Unauthorized');
  } else {
    // do something else
  }
});

Upvotes: 3

slinhart
slinhart

Reputation: 572

First of all, you will need to define some callback options for you addressBook fetch. For what you are trying to accomplish, you need to provide the error callback.

this.addressBook.fetch({
 error: function(xhr) {
   if(xhr.status == 401) { // Put logic you want in the case of 401 here... 
 }
});

Disclaimer: I have not tested this code, as I do not have a convenient way I can think of to reproduce this problem.

I believe it works because Backbone passes a jQuery xhr Object to its error callback. http://backbonejs.org/#Model-fetch

Upvotes: 1

Related Questions