Question

I’m trying to get some animation to work during a Backbone View’s render operation that is called when I have refreshed the data of the underlying model to a new record.

SiteView = Backbone.View.extend({

    initialize: function () {
        this.model.bind('change', this.render, this);
    },

    render: function () {
        if (this.model.get('name')) {
            var callback = function (view) {
                view.$("#activesite_name").empty().append(view.model.get('name'));
                view.$("#activesite_desc").empty().append(view.model.get('description'));
                $(view.el).show('drop', { direction: 'down' }, 'slow').removeClass('hidden');
            };

            $(this.el).filter(':visible').fadeOut(500, callback(this));
        }
    }
});

However, the jQuery UI callback function is being executed before the show operation is, resulting in the UI updating and then disappearing when refreshing from one model selection to another.

How can I get the callback to be called only once the element is properly hidden?

Answer 1

Try this:

render: function () {
    if (this.model.get('name')) {
        var view = this;
        var callback = function () {
            view.$("#activesite_name").empty().append(view.model.get('name'));
            view.$("#activesite_desc").empty().append(view.model.get('description'));
            view.$el.show('drop', { direction: 'down' }, 'slow').removeClass('hidden');
        };

        $(this.el).filter(':visible').fadeOut(500, callback);
    }
}