2

我希望我的 Marionette 视图以动画方式关闭并等待动画完成，然后再将它们从 DOM 中删除。
（见解将不胜感激）

我用以下方式重写了 Marionette.View 关闭方法：

close: function(){
        if (this.isClosed) { return; }

        // allow the close to be stopped by returning `false`
        // from the `onBeforeClose` method
        var beforeCloseReturnValue = this.triggerMethod("before:close");
        if (beforeCloseReturnValue === false){
            return;
        }

        if (IsObjectNullOrUndefined(beforeCloseReturnValue))
        {
            this.closeTheView();
            return;
        }

        if (beforeCloseReturnValue.promise)
        {
            var _this = this;
            $.when(beforeCloseReturnValue).done(function(){
                console.log("view close done!");
                _this.closeTheView();
            });
        }
    },

closeTheView: function(){
    // mark as closed before doing the actual close, to
    // prevent infinite loops within "close" event handlers
    // that are trying to close other views
    this.isClosed = true;
    this.triggerMethod("close");

    // unbind UI elements
    this.unbindUIElements();

    // remove the view from the DOM
    this.remove();
 }

并且视图实例包含以下 onBeforeClose 方法的实现： 

onBeforeClose: function(){
  _this = this;
  return $.Deferred(function(){
    _this.$el.fadeOut(2000, dfd.resolve);
    }).promise();
}

到目前为止工作得很好。
想听听您是否对此有任何想法。
谢谢。

4

1 回答 1

0

我需要这样的东西，并想出了或多或少相同的解决方案。

它有效，但我不喜欢两件事：1）它专门用于关闭视图。一个更通用的动画解决方案会很好。2）如果一个人使用 CSS 动画（通过交换类）并且他们改变了 css 中的时间，那么他们需要手动更新承诺（这可能会在大型应用程序上变得混乱）。

我认为 AngularJS 处理动画的方式运作良好并且有效地处理了上述 2 个问题。但也许它不适合 Marionette/Backbone 无主见的风格......

于 2013-12-03T16:15:52.950 回答