javascript – Backbone.Marionette:将视图关闭,直到关闭动画完成

我试图设置动画渲染和关闭一个ItemView与Backbone.Marionette.为了呈现视图,这是相当简单的:
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;
},

我是新来使用Marionette,所以我不知道这是否是最好的解决方案.如果这是最好的方法,我会提交一个拉动请求,尽管我想更多地考虑如何使用其他类型的视图.

这可能会用于其他目的,例如要求关闭确认(请参阅此issue)或运行任何类型的异步请求.

思考?

解决方法

覆盖close方法是一种方法,但是您可以将其缩短一点,因为您可以调用Marionette close方法而不是复制它:
_.extend(Backbone.Marionette.ItemView.prototype,{
    close: function(callback) {
        var close = Backbone.Marionette.Region.prototype.close;
        if (this.beforeClose) {

            // if beforeClose returns false,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);
    },});

一个想法是覆盖您的视图的删除方法.所以你淡出视图的元素,然后从DOM中删除

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...