What is convenient way to temporarily disable certain UI element while persisting model in Backbone.JS?

Javascript
1

Hello,

let’s say I’ve a simple backbone view with a web form and “save” button, when clicked it triggers model.save(), so far so good, but the server side part is interacting with 3rd party service and therefore response takes few more seconds.

In order to eliminate any confusion on client side and show user that operation is in progress I want disable the button and/or display a throbber.

Initially I did it like so:

  1. disable button before model.save()
  2. enable button in success/failure callback, e.g.: model.save({},{success: function(){...}});

What others options we’ve?

Thanks in advance.

2

Probably first improvement would be to use model.on('sync') and/or model.on('error') instead of callbacks on the save method, because I just noticed that others events aren’t triggered if callbacks is specified this way…

http://backbonejs.org/#Events-catalog