Question

我创建了一个我扩展的基本视图，我想要做的是在基础中设置选择器并使用延迟解析并在扩展视图中继续执行另一个操作，但我不确定如何实现这个？现在，控制台登录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

这里的问题是在{2}中运行它时未定义this.deferred。它基本上运行：$.when(undefined).done(function() { ... });这就是它立即执行的原因。

您可以通过在ParentView的初始化函数中设置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/

等待承诺在Base View中解析，然后在扩展视图中继续操作？

1 个答案: