等待在基礎視圖中解決承諾，然后在擴展視圖中繼續操作？

Question

我已經創建了一個擴展的基礎視圖，我想做的是在基礎中為選擇器設置動畫，並使用deferreds resolve並在擴展視圖中繼續執行其他操作，但是我不確定如何實現這一點？ 現在，控制台會立即登錄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???');
        });
    }
});

JSFiddle http://jsfiddle.net/jn35b8pw/

Answer 1

這里的問題是this.deferred在ChildView中運行this.deferred未定義。 它基本上在運行： $.when(undefined).done(function() { ... }); 這就是為什么它立即執行。

您可以通過在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???');
        });
    }
});

小提琴： http : //jsfiddle.net/zspxL3bd/