Javascript MVC + jQuery로 이벤트 수신 및 디스패치

Question

jQuery를 사용하여 자바 스크립트를 배우고 이벤트 수신 및 디스패치에 대한 질문이 있습니다. 내 모델에서

, 나는 변경 이벤트를 트리거하는 기능이 있습니다

Model.prototype.setCurrentID = function(currentID) { 
    this.currentID = currentID; 
    $('body').trigger('change'); 
} 

트리거 이벤트가 요소를 필요로를, 그래서 '몸'에 바인딩됩니다. 이 좋은 연습이나 나쁜 연습입니까?

var model:Model = new Model(); 
model.addEventListener(CONST_VALUE, handlerFunction); 

에서 : 내가 더 잘 알고 AS3에서

은 내가 모델의 인스턴스로이 이벤트를 수신하는 CONST 값을 전달 모델에서 글로벌 이벤트를 전달 단순히 것 jQuery를 내보기 객체 내에서, 나뿐만 아니라 청취자에 요소를 첨부 할 필요가있다, 그래서 나는 다시 한 번 '몸'에 바인딩 :

var View = function(model, controller) { 
    var model; 
    var controller; 
    this.model = model; 
    this.controller = controller; 

    $('body').change(function(evt) { updateSomething(evt); }); 

    function updateSomething(evt){console.log('updating...')}; 
} 

그것은 일하고있어,하지만 난에 당신의 포획에 관심이 있어요 주제.

Answer 1

공개되지 않는 비공개 디스패처를 사용하는 것이 좋습니다.
사용자 또는 플러그인은 신체의 모든 이벤트 (운영자) 바인딩 해제하는 경우 예를 들어, 당신의 논리는 실패 할 수 있습니다 DOM 노드를 작성하여이 피할 수

$('body').unbind(); 

을 끝까지 노출시키지 사용자 (DOM을에 추가하지 않음) : jQuery로 이벤트 프로그래밍 응용 프로그램을 개발할 때

var dispatcher = $('<div />'); 

Model.prototype.setCurrentID = function(currentID) { 
    this.currentID = currentID; 
    dispatcher.trigger('change'); 
} 

var View = function(model, controller) { 
    this.model = model; 
    this.controller = controller; 

    dispatcher.bind('change',function(evt) { updateSomething(evt); }); 
    function updateSomething(evt){console.log('updating...')} 
} 

또 다른 좋은 일이 마음에 가지고는 jQuery를 사용하면/트리거 사용자 정의 이벤트를 결합 할 수 있으며 또한 당신에게 to namespace your events을 수 있다는 것입니다. 이 방법으로 이벤트 바인딩 및 트리거링을보다 효율적으로 제어 할 수 있습니다.

Answer 2

내 반대가 : 나는이 broswer 이벤트와 이름이 같은 이벤트를 바인딩 할 것

• , 간섭이있을 수 있습니다.
• 하나의 모델이있는 경우 코드가 작동하지만 둘 이상인 경우 동일한 요소에 바인딩하거나 트리거하지 않고 코드를 분리해야합니다.

방법에 대해 :

Model.prototype.bind = function(event, func) { 
    if (!this._element) this._element = $('<div>'); 
    this._element.bind(this.name+'_'+event, $.proxy(func, this)); 
    return this; 
}; 
Model.prototype.trigger = function(event) { 
    if (!this._element) this._element = $('<div>'); 
    this._element.trigger(this.name+'_'+event); 
    return this; 
}; 

당신이 모두 해결이 방법. 참고 이벤트 이름에 this.name+'_'을 추가 할 예정입니다. 각 모델에는 일종의 이름이 있으며 이벤트가 브라우저 이벤트와 일치하지 않는 것으로 가정하지만 접두어를 삭제할 수도 있습니다.

또한 이벤트 처리기의 this이 모델을 참조하도록 바인드에 $.proxy을 사용하고 있습니다.

var View = function(model, controller) { 
    .... 
    model.bind('change', function() {...}); 
} 

Answer 3

추가 단계로 이동하여 사용자 지정 글로벌 이벤트를 만들 수 있습니다.jQuery를 사용하면과 같이 글로벌 사용자 정의 이벤트를 트리거 할 수 있습니다

$.event.trigger('change'); 

해당 이벤트에 가입 할 수있는 모든 요소 :

$('#myDiv').bind('change', function() { 
    console.log($(this)); 
}); 

이벤트 핸들러의 this 키워드는 트리거에 가입 DOM 요소입니다 행사.