बैकबोन.मैरियनेट: पहले से बंद करें बंद करें एनीमेशन पूर्ण हो गया है

Question

मैं बैकबोन.मैरियनेट के साथ एक आइटम व्यू को प्रतिपादन और बंद करने पर एनिमेशन सेट करने की कोशिश कर रहा हूं। एक दृश्य प्रतिपादन के लिए, यह काफी सरल है:

MyItemView = Backbone.Marionette.View.extend({ 
    ... 
    onRender: function() { 
    this.$el.hide().fadeIn(); 
    } 
    ... 
}); 

यह जब मैं इसे प्रस्तुत करना में मेरे विचार फीका करना होगा। लेकिन मान लीजिए कि मैं अपने विचार को करीब से बाहर करना चाहता हूं।

beforeClose: function() { 
    this.$el.fadeOut();  // doesn't do anything.... 
} 

यह काम नहीं करेगा, क्योंकि आइटम this.beforeClose() बुला के बाद तुरंत बंद कर देता है, तो एनीमेशन पूरा करने के लिए समय नहीं है।

क्या कोई तरीका है, मैरियनेट का उपयोग करके, यह एक बंद एनीमेशन को पूरा करने के लिए है?

_.extend(Backbone.Marionette.ItemView.prototype, { 
    close: function(callback) { 

     if (this.beforeClose) { 

      // if beforeClose returns false, wait for beforeClose to resolve before closing 
      // Before close calls `run` parameter to continue with closing element 
      var dfd = $.Deferred(), run = dfd.resolve, self = this; 
      if(this.beforeClose(run) === false) { 
       dfd.done(function() { 
        self._closeView();    // call _closeView, making sure our context is still `this` 
       }); 
       return true; 
      } 
     } 

     // Run close immediately if beforeClose does not return false 
     this._closeView(); 
    }, 

// The standard ItemView.close method. 
    _closeView: function() { 
     this.remove(); 

     if (this.onClose) { this.onClose(); } 
     this.trigger('close'); 
     this.unbindAll(); 
     this.unbind();  
    } 
}); 

अब मैं ऐसा कर सकते हैं:

---

वैकल्पिक रूप से, इस समाधान मैं प्रयोग कर रहे है

beforeClose: function(run) { 
    this.$el.fadeOut(run);  // continue closing view after fadeOut is complete 
    return false; 
}, 

मैं कठपुतली का उपयोग कर के लिए नया हूँ, इसलिए मैं मुझे यकीन नहीं है कि यह सबसे अच्छा समाधान है या नहीं। यदि यह सबसे अच्छा तरीका है, तो मैं एक पुल अनुरोध सबमिट करूंगा, हालांकि मैं थोड़ा और विचार करना चाहता हूं कि यह अन्य प्रकार के विचारों के साथ कैसे काम कर सकता है।

यह संभावित रूप से अन्य प्रयोजनों के लिए उपयोग किया जा सकता है, जैसे कि बंद होने पर पुष्टि के लिए पूछना (यह issue देखें), या किसी भी तरह का असीमित अनुरोध चला रहा है।

विचार?

Answer 1

close विधि ओवरराइड करना एक तरह से यह करने के लिए है, लेकिन आप, इसे कम थोड़ा लिख ​​सकते हैं के रूप में आप Marionettes बजाय इसे डुप्लिकेट करने के close विधि कॉल कर सकते हैं:

_.extend(Backbone.Marionette.ItemView.prototype, { 
    close: function(callback) { 
     var close = Backbone.Marionette.Region.prototype.close; 
     if (this.beforeClose) { 

      // if beforeClose returns false, wait for beforeClose to resolve before closing 
      // Before close calls `run` parameter to continue with closing element 
      var dfd = $.Deferred(), run = dfd.resolve, self = this; 
      if(this.beforeClose(run) === false) { 
       dfd.done(function() { 
        close.call(self); 
       }); 
       return true; 
      } 
     } 

     // Run close immediately if beforeClose does not return false 
     close.call(this); 
    }, 


}); 

एक और विचार overide करने के लिए है remove आपके विचार की विधि। तो आप दृश्य के तत्व को मिटा देते हैं और फिर इसे DOM

remove: function(){ 
    this.$el.fadeOut(function(){ 
    $(this).remove(); 
    }); 
}