0

What I want to do is show a 'Saving' message (using jQuery's slideDown()) before saving the backbone model and hide it after the response is recieved from the server (jQuery slideUp()). However, for some reason, even though when debugging everything seems to be working as it should, the jquery slideDown is not triggered until after the response is recieved from the server. Here's my code:

   saveSystemConfiguration: function (result) {
        /// <summary>
        /// Saves the system configuration. 
        /// </summary>
        /// <returns type="Object">The promise.</returns>

        var self = this;
        Global.eventAggregator.trigger('loading:start', $('#savingPopupMsg').text());

        var promise = this.model.save({}, {
            success: function (model) {
                model.set('isNew', false);
                self.dirty = false;
                result.success = true;
                Global.eventAggregator.trigger('loading:end', $('#savingPopupMsg').text());
                self.isSaving = false;
            },
            error: function (model, error) {
                self.isSaving = false;
                result.success = false;
                Global.eventAggregator.trigger('loading:end', $('#savingPopupMsg').text());
                self.displayError();
            },
            async: false
        });

        return promise;
    }

The loading:start and loading:end events are handled by the loadingView which triggers the slideDown() and slideUp().

    var loadingView = Backbone.View.extend({
    el: $('#loadingPopupView'),

    initialize: function () {
        /// <summary>
        /// Sets up listeners on the event aggregator.
        /// </summary>

        _.bindAll(this, 'showView', 'hideView');
        Global.eventAggregator.on('loading:start', this.showView);
        Global.eventAggregator.on('loading:end', this.hideView);
        this.minDisplayTime = 1000;
    },

    showView: function (msg) {
        /// <summary>Shows the loading view.</summary>
        /// <param name="msg" type="Object">The message to display while loading.</param>

        this.$('#loadingReason').text(msg);
        this.$el.slideDown('fast');

        this.minDisplayTimeReached = new $.Deferred();

        var self = this;
        setTimeout(function () {
            self.minDisplayTimeReached.resolve();
        }, this.minDisplayTime);
    },

    hideView: function () {
        /// <summary>Hides the loading view.</summary>

        var self = this;

        if (!this.minDisplayTimeReached) {
            return;
        }

        this.minDisplayTimeReached.done(function() {
            self.$el.slideUp('fast');
        });
    }
});

return loadingView;
});

Any help would be very appreciated.

4

1 回答 1

1

Backbone 将其 HTTP 请求委托给 jQuery，然后您明确地传递async: false给请求：

async (default: true)
默认情况下，所有请求都是异步发送的（即默认设置为true）。如果您需要同步请求，请将此选项设置为 false。

为非阻塞调用删除此选项。

于 2013-09-19T08:15:09.937 回答