Javascript 在基本视图中等待承诺解决，然后在扩展视图中继续操作？

我已经创建了一个扩展的基础视图，我想做的是在基础中设置一个选择器的动画，并使用延迟解决，然后在扩展视图中继续执行另一个操作，但我不确定如何实现这一点？此时，控制台会立即登录when函数：/

JS

    var ParentView = Backbone.View.extend({

    template: Handlebars.compile( $('.tmpl-example').html() ),

    initialize: function() {

    },

    render: function() {
        this.$el.html( this.template() );

        _.defer(function() {
            this.afterRender();
        }.bind(this));

        return this;
    },

    afterRender: function() {
        this.deferred = $.Deferred();

        this.$('.js-panel').addClass('animate');

        this.$('.js-panel').on('transitionend', function() {
            this.deferred.resolve();
        }.bind(this));


    }
});

var ChildView = ParentView.extend({
    initialize: function() {    
        $.when(this.deferred).done(function() {
            console.log('now go do something???');
        });
    }
});

---

jsiddle

这里的问题是

this.deferred

在ChildView中运行时没有定义。它基本上正在运行：

$.when（未定义）.done（函数（）{…}）这就是它立即执行的原因

通过在ParentView的initialize函数中设置this.deferred，可以获得期望的行为：

var ParentView = Backbone.View.extend({
    template: Handlebars.compile( $('.tmpl-example').html() ),
    initialize: function() {
        this.deferred = $.Deferred();
    },
    render: function() {
        this.$el.html( this.template() );
        _.defer(function() {
            this.afterRender();
        }.bind(this));
        return this;
    },
    afterRender: function() {
        this.$('.js-panel').addClass('animate');
        this.$('.js-panel').on('transitionend', function() {
            this.deferred.resolve();
        }.bind(this));
    }
});

只需确保在ChildView的
initialize
函数中调用的是“super”：

var ChildView = ParentView.extend({
    initialize: function() {
        ParentView.prototype.initialize.call(this); // call super
        $.when(this.deferred).done(function() {
            console.log('now go do something???');
        });
    }
});

小提琴：