Backbone.Marionette : beforeClose 애니메이션이 완료 될 때까지 뷰 지연을 연기하십시오.

Question

Backbone.Marionette을 사용하여 ItemView를 렌더링하고 닫을 때 애니메이션을 설정하려고합니다. 보기 렌더링의 경우 매우 간단합니다.

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

렌더링 할 때 내보기가 희미 해집니다. 그러나 가까운 시야에서 내 시야를 퇴색시키고 싶다고합시다. 항목 this.beforeClose()를 호출 한 후 즉시 닫기 때문에 애니메이션이 완료하는 데 시간이되지 않도록

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

이는 작동하지 않습니다.

Marionette을 그대로 사용하여 닫는 애니메이션을 완성하는 방법이 있습니까?

_.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 참조) 또는 비동기 요청을 실행하는 것과 같은 다른 목적으로 사용될 수 있습니다.

생각하십니까? close 방법을 재정의

Answer 1

이 작업을 수행 할 수있는 하나의 방법이지만, 대신 그것을 복제의 꼭두각시 인형을 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); 
    }, 


}); 

또 다른 아이디어는을 오버라이드 (override)하는 것입니다 remove보기의 방법. 따라서 뷰의 요소를 페이드 아웃 한 다음 DOM에서 제거하십시오.

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