Warten Sie, bis sich das Versprechen in der Basisansicht auflöst und die Aktion in der erweiterten Ansicht fortgesetzt wird?

Question

Ich habe eine Basisansicht erstellt, die ich erweitern möchte, was ich tun möchte, ist ein Selektor in der Basis zu animieren und deferreds auflösen zu verwenden und mit einer anderen Aktion in der erweiterten Ansicht fortzufahren, aber ich bin nicht sicher, wie dies zu erreichen? Im Augenblick ist das Konsolenprotokoll in dem, wenn Funktion protokolliert sofort:/

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???'); 
     }); 
    } 
}); 

JSFiddlehttp://jsfiddle.net/jn35b8pw/

Answer 1

Das Problem hierbei ist, dass this.deferred nicht definiert wurde, wenn es ausgeführt wird in die Kindansicht. Es läuft im Grunde: $.when(undefined).done(function() { ... }); weshalb es sofort ausgeführt wird.

Sie können das Verhalten erhalten Sie durch die Einrichtung von this.deferred in Ihrem ParentView initialize Funktion erwartet werden:

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)); 
    } 
}); 

So stellen Sie sicher in Ihrer ChildView initialize Funktion Sie anrufen '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???'); 
     }); 
    } 
}); 

Geige: http://jsfiddle.net/zspxL3bd/