Dojo에서 _transition 메소드를 오버로드

Question

나는이 문제에 정신 나간다. 내가하고 싶은 것은 StackContainer를 상속 받아 간단한 효과를 추가하는 것뿐입니다. 참고 : 전이할만한 실험 위젯이 너무 복잡하다는 것을 알고 있습니다. 그러나 코드는 과도한 총량입니다. 내가 뭘했는지가 가장 단순한데 스택 컨테이너가 전환을 수행하는 방법.

이 작동하지 않는 예는 다음과 같습니다

declare('app.StackFade', [ StackContainer], { 

    _transition:function(newWidget, oldWidget){ 

    // this.inherited(arguments); // This breaks things, obviously 

    console.log("Transition called"); 
    html.style(oldWidget.domNode, "opacity", 1);// Random attempt 
    baseFx.fadeOut({ 
     node:oldWidget.domNode, 
     duration: 500, 
     onEnd: function(){ 
     console.log("First animation finished"); 
     baseFx.fadeIn({ 
      node:newWidget.domNode, 
      duration:500, 
      onEnd: function(){ 
      html.style(newWidget.domNode, "opacity", 0); 
      lang.hitch(this,"inherited", arguments, arguments); // this doesn't work 
      console.log("Second animation finished"); 
      }, 
     }).play(); 
     } 
    }).play(); 

    } 
} 

어떻게 작동 하나에이 작동하지 않는 예를 설정합니까? 다시 말하지만, 나는 아주 간단한, 평범한, _transition을 바꾸는 몇 줄의 코드를 따른다.

Answer 1

내 선호하는 활동, 내 자신의 질문에 대답 ... Dojo, lang.hitch 및 this.inherited (인수)에 문제가있는 것 같습니다.

용액 that, 및 또한 argumentsa로 (a 및 that 함수에 로컬 변수 곳)에 this를 얻을 수있다.

나는

즐기 그것을 "페이드"효과를 제공 (또는 탭 컨테이너와 함께 작동) 모든 스택 컨테이너에 혼합 할 수있는 믹스 인을 ... 만드는 끝났다.

define([ 
    "dojo/_base/declare", 
    "dojo/_base/html", 
    "dojo/_base/fx", 
    "dojo/_base/lang", 
    "app/defaults", 
    "app/globals", 

    ], function(
    declare 
    , html 
    , baseFx 
    , lang 
    , BusyButton 
    , defaults 
    , g 
){ 

return declare('app._StackFadingMixin', null, { 

    fadeInInProgress: null, 
    fadeOutInProgress: null, 

    _transition:function(newWidget, oldWidget){ 

    // console.log("Transition called"); 

    // Needed later for calling this.inherited(arguments); 
    that = this; 
    var a = arguments; 

    /* 
    console.log("Values:"); 
    console.log("FadeInInProgress :" + this.fadeInInProgress); 
    console.log("FadeOutInProgress :" + this.fadeOutInProgress); 
    */ 

    // An animation was stopped: don't do the whole animation thing, reset everything, 
    // called this.inherited(arguments) as if nothing happened 
    if(this.fadeInInProgress || this.fadeOutInProgress){ 

     // Stop animations 
     if(this.fadeInInProgress){ this.fadeInInProgress.stop(); } 
     if(this.fadeOutInProgress){ this.fadeOutInProgress.stop(); } 

     // Reset opacity for everything 
     html.style(newWidget.domNode, "opacity", 1); 
     html.style(oldWidget.domNode, "opacity", 1); 

     // call inherited(arguments) as if nothing happened 
     this.inherited(arguments); 
     return; 
    } 

    // //////////////////////////////////////// 
    // // FADEOUT 
    // //////////////////////////////////////// 
    // console.log("Fade out starting"); 
    that.fadeOutInProgress = baseFx.fadeOut({ 
     node:oldWidget.domNode, 
     duration: 150, 
     onStop: function(){ 
     that.fadeOutInProgress = null; 
     // console.log("Fadeout stopped"); 
     }, 

     // //////////////////////////////////////// 
     // // FADEIN 
     // //////////////////////////////////////// 
     onEnd: function(){ 

     that.fadeOutInProgress = null; 

     // Make the widget transparent, and then call inherited -- which will do the actual switch. 
     html.style(newWidget.domNode, "opacity", 0); 
     that.inherited(a); 
     // console.log("Fadeout ended"); 

     // At this point the widget is visible, selected but transparent. 
     // Let's fix that... 
     // console.log("Fade in starting"); 
     that.fadeInInProgress = baseFx.fadeIn({ 
      node:newWidget.domNode, 
      duration: 150, 
      onStop: function(){ 
      that.fadeInInProgress = null; 
      // console.log("Fadein stopped"); 
      }, 
      onEnd: function(){ 
      // console.log("Fadein ended"); 
      that.fadeInInProgress = null; 
      }, 
     }).play(); 
     } 
    }).play(); 
    } 
}); // Declare 

}); // 정의