2012-01-24 2 views
0

클릭 핸들러에서 fnB를 사용하고 싶습니다. 어떤 우아한 해결책이 있습니까? 감사. SoWeLie의 답변에 따라jQuery 'closure'에서 외부 메서드에 액세스

A = function() { 
    ... 
} 

B = function() { 
    ... 
} 
B.prototype = new A(); 
B.prototype.fnB = function() {} 
B.prototype.fn = function() { 
    // this isntanceof B -> true 
    jQuery(selector).click(function() { 
    this.fnB() // this instance of B -> false, this == $(selector) -> true 
    } 
} 

구현 :

EventType = { 
    ButtonClicked: 0 
    ... 
} 

function Delegate(object, method) { 
    return function() { method.apply(object, arguments); } 
} 

function Observable() { 
    this._eventHandlers = {}; 
} 

Observable.prototype = { 
    addListener: function(eventType, listener) { 
     if(!this._eventHandlers.eventType) { 
      this._eventHandlers.eventType = []; 
     } 
     this._eventHandlers.eventType.push(listener); 
    }, 

    removeListener: function(eventType, listener) { 
     if(this._eventHandlers.eventType) { 
      for(var i = this._eventHandlers.eventType.length; --i > -1;) { 
       if(!listener || this._eventHandlers.eventType[i] == listener) { 
        this._eventHandlers.eventType.splice(i, 1); 
       } 
      } 
     } 
    }, 

    fireEvent: function(eventType, data) { 
     if(this._eventHandlers.eventType) { 
      for(var i = 0; i < this._eventHandlers.eventType.length; ++i) { 
       var handleEvent = this._eventHandlers.eventType[i]; 
       if(handleEvent) { 
        handleEvent(this, data); 
       } 
      } 
     } 
    } 
} 

Dialog.Buttons = { ButtonOk: 0, ButtonCancel: 1, ButtonYes: 2, ButtonNo: 3, ButtonClose: 4 }; 
Dialog.prototype = new Observable(); 
Dialog.prototype.bindEvents = function() { 
    $('#dlgButtonOk', this._$el).click(Delegate(this, function() { 
     this.fireEvent(EventType.ButtonClicked, Dialog.Buttons.ButtonOk); 
    })); 
    $('#dlgButtonCancel', this._$el).click(this, function() { 
     this.fireEvent(EventType.ButtonClicked, Dialog.Buttons.ButtonCancel); 
    }); 

$(function() { 
    dialog = new Dialog('.dialogWnd') 
    dialog.addListener(EventType.ButtonClicked, function() {alert(1)}) 
}); 

???? 죄송합니다. 다음 이유로 인해 편집을 제출할 수 없습니다.

게시물에 코드 섹션을 설명 할 수있는 문맥이 많지 않습니다. 귀하의 시나리오를보다 명확하게 설명하십시오. ???

답변

1

가장 우아한 해결책은 다음과 같습니다

+0

나는 C#에서 사용되는 대리인을 기반으로하는 것과 기본적으로 같은 솔루션을 찾았습니다. http://odetocode.com/Blogs/scott/archive/2007/07/04/javascripts-slippery-this-reference- and-other-monsters-in-the-closet. 고마워. – DraganS

+0

그게 내 코드가하는 것과 정확히 같습니다. – SoWeLie

1
var that = this; 
jQuery(selector).click(function() { 
    that.fnB() 
} 

bind 또는 아직 널리 지원되지 않습니다.

var hitch = function (scope, callback) { 
     return function() { 
      return callback.apply(scope, Array.prototype.slice.call(arguments)); 
     } 
    } 

은과 같이 코드를 변경합니다 :

jQuery(selector).click(hitch(this, function() { 
    this.fnB() // this instance of B -> false, this == $(selector) -> true 
    })) 

(가) 함수의 방법을 적용 사용

B.prototype.fn = function() { 
    // this isntanceof B -> true 
    var that = this; 
    jQuery(selector).click(function() { 
     that.fnB(); 
    }); 
}; 
0

그냥 폐쇄를 사용 귀하의 익명의 기능에 차질이 생기는 것에 주목하십시오. 이것은 클릭 핸들러 내에서 대처가 유지되도록합니다.

+0

나는 그것을 좋아하지 않지만 아마 JS에서 유일한 해결책 일 것이다. 감사. – DraganS