Backbone.Marionette: hoãn xem gần đến trước khiĐóng hoạt ảnh hoàn tất

Question

Tôi đang cố gắng đặt hoạt ảnh trên hiển thị và đóng một ItemView bằng Backbone.Marionette. Để hiển thị chế độ xem, điều này khá đơn giản:

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

Chế độ xem này sẽ mờ dần khi tôi hiển thị. Nhưng hãy nói rằng tôi muốn mờ dần tầm nhìn của tôi khi gần gũi.

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

Điều này sẽ không hoạt động vì mục đóng ngay sau khi gọi this.beforeClose(), vì vậy hoạt ảnh không có thời gian để hoàn thành.

Có cách nào hay không, bằng cách sử dụng Marionette khi nó đứng, để hoàn thành hoạt ảnh đóng?

---

Ngoài ra, đây là cách giải quyết Tôi đã sử dụng:

_.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();  
    } 
}); 

Bây giờ tôi có thể làm điều này:

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

Tôi mới để sử dụng rối, vì vậy tôi 'không chắc chắn nếu đây là giải pháp tốt nhất. Nếu đây là cách tốt nhất, tôi sẽ gửi yêu cầu kéo, mặc dù tôi sẽ muốn suy nghĩ thêm một chút về cách điều này có thể hoạt động với các loại chế độ xem khác.

Điều này có khả năng có thể được sử dụng cho các mục đích khác, chẳng hạn như yêu cầu xác nhận đóng cửa (xem issue) này hoặc chạy bất kỳ loại yêu cầu không đồng bộ nào.

Suy nghĩ?

Answer 1

Trọng phương pháp close là một cách để làm điều này, nhưng bạn có thể viết nó cắn ngắn hơn, như bạn có thể gọi con rối close phương pháp thay vì sao chép nó:

_.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); 
    }, 


}); 

ý tưởng khác là overide các remove phương thức của chế độ xem của bạn. Vì vậy, bạn làm mờ phần tử của chế độ xem và sau đó xóa phần tử đó khỏi DOM

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