propHooks를 눈에 거슬리지 않게 어떻게 사용합니까?

Question

나는 HTML 체크 박스를 그래픽으로 바꾸는 small jQuery plugin을 고치려고하고있다. 내가 직면하고있는 문제는 체크 박스의 "checked"속성을 변경하면 change 이벤트가 트리거되지 않으므로 그래픽 represntation이 업데이트되지 않는다는 것입니다.

필자는 속성을 변경할 때 수동으로 변경 이벤트를 트리거 할 수 있지만 플러그인에 포함될보다 일반적인 솔루션을 찾고 싶습니다.

주위를 검색 할 때마다 속성이 설정 될 때마다 알림을 얻는 데 사용할 수있는 propHooks를 가리키는 this answer을 발견했습니다. 그래서 다음과 같이 쓸 수 있습니다 :

jQuery.propHooks.checked = { 
    set: function (el, value) { 
     el.checked = value; 
     $(el).trigger('change'); 
    } 
}; 

이제 속성이 설정 될 때마다 change 이벤트가 트리거됩니다.

내 관심사는 매우 현지화되지 않았기 때문입니다. 이제 jQuery가이 작은 플러그인을 위해서 페이지의 모든 것에 대해 작동하는 방식을 변경했습니다. 더구나 페이지의 두 플러그인이 같은 기술을 사용하면 어떻게 될지 잘 모르겠습니다. 이벤트가 두 번 트리거되거나 두 번째 훅이 첫 번째 겹쳐 쓰기를 덮어 씁니까? 두 가지 행동 모두 문제가있는 것처럼 보입니다.

propHook의 모든 문서를 찾는 데 어려움을 겪고 있습니다. 그것을 사용하는 적절한 방법은 무엇입니까?

Answer 1

SIGH.

나는 방식 propHooks 작품 뒤에 추론에 빛을 흘리는 사람을 기대했다. 어쨌든, 여기 propHooks의 효과를 플러그인으로 제한하기 위해 내가 한 일이 있습니다.

var $elements = $(); 

$.fn.ezmark = function(options) { 
    ... 
    return this.each(function() { 
     ... // plugin code 

     // Make a list of all elements that the plugin was applied to 
     $elements = $elements.add(this); 
    }); 
} 

그리고 문제가되는 요소는 다음과 같이 목록에있는 경우 다음 propHooks 코드에서, 내가 확인 :

$.propHooks.checked = { 
    set: function (el, value) { 
     if ($elements.filter(el).length !== 0) { 
      el.checked = value; 
      $(el).trigger('change'); 
     } 
    } 
}; 

나는 플러그인 자체에 다음 코드를 추가 이것은 완벽하지 않습니다. 나는 아마 더 적은 돌출 이벤트를 triggerring하지만, 대신 상태 변화에 대한 플러그인 처리기를 호출하지 않음으로써 만들 수 있습니다.

Answer 2

이 코드는 네이티브 체크 박스의 기본 동작에 영향을주지 않습니다.

jQuery.propHooks.checked = { 
    get: function (el) { 
    if $(el).is(':checkbox') { 
     return null;    // should not return undefined, return null. 
    } 
    // do something 
    }, 
    set: function (el, value) { 
    if $(el).is(':checkbox') { 
     return undefined;   // should not return null, return undefined. 
    } 
    // do something 
    } 
}; 

관련 코드 : https://github.com/jquery/jquery/blob/master/src/attributes.js#L400-L409

Answer 3

나는 비슷한 플러그인 작업과도이 문제를 가로 질러하고 있습니다.

확인란을 프로그램 확인/체크되지 않은 원인 다른 이벤트 때 그래서 "변화"이벤트를 트리거, 사용자 상호 작용 만에서 온 내가 예상하는 이벤트를 변경과 함께 일하고 있어요 기존 코드의 많은 합니다 (사용자이 값을 변경할 때 이러한 다른 핸들러 만 실행해야합니다) 안되는을 발사합니다.

해결책은 "change"이벤트, 및에 "updateicon"이라는 사용자 정의 이벤트 둘 다에 내 icon-update-handler를 바인드하는 것이 었습니다. 그런 다음, propHooks.checked있다.체크/체크되지 않은 요소가 내 플러그인이 이러한 "아이콘화된"입력/체크 박스 요소를 찾아 바인딩하는 데 사용하는 클래스를 가지고있는 경우에만이 "updateicon"이벤트를 트리거합니다.

jQuery.propHooks.checked = { 
    set: function (el, value) { 
     el.checked = value; 
     var jqEl = $(el); 
     if(jqEl.is(".iconified")) jqEl.trigger('updateicon'); 
    } 
};