propHooksを目立たないように使うには？

Question

私はsmall jQuery pluginを修正して、HTMLチェックボックスをグラフィカルにすることを試みています。私が直面している問題は、チェックボックスの "checked"プロパティを変更すると、changeイベントがトリガされないため、グラフィカルなrepresntationが更新されないということです。

明らかに、私はプロパティを変更するときに変更イベントを手動でトリガすることができますが、プラグインに含まれるより一般的な解決策を探したいと思います。

検索すると、this answerが見つかりました。私はpropHooksを指摘しました。プロパティを設定するたびに通知を受け取ることができます。したがって、私はこれを書くことができます：

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

これで、プロパティが設定されるたびにchangeイベントがトリガーされるようになりました。

私の懸念は、これはあまりローカライズされていないということです。今、この小さなプラグインのために、ページ上のすべてのものに対してjQueryの動作を変更しました。さらに、ページ上の2つのプラグインで同じテクニックを使用した場合、どうなるか分かりません。イベントが2回トリガーされるか、2回目のフックが最初に上書きされますか？どちらの動作も問題があるようです。

propHooksのドキュメントを見つけるのに苦労しています。それを使用する適切な方法は何ですか？

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'); 
     } 
    } 
}; 

これは完全ではありません。私はおそらくイベントをトリガーしないで、それほど目立たないようにすることができますが、代わりに状態変更のためのプラグインハンドラーを呼び出すだけです。

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

私は、同様のプラグインに取り組んで、あまりにもこの問題に出くわしましたよ。

私が期待して働いている既存のコードの多くチェックボックスがプログラムで確認/未確認の原因他のイベントであるときに「変更」イベントをトリガ、ユーザーインタラクションのみから来るようにイベントを変更しますこれらのハンドラはユーザが値を変更したときにのみ実行する必要があります。

私が解決した解決策は、icon-update-handlerを "change"イベントと "updateicon"というカスタムイベントにバインドすることでした。それから、propHooks.checkedで。チェックされた/チェックされていない要素が、私のプラグインがこれらの "アイコン化された"入力/チェックボックス要素を見つけてバインドするために使用するクラスを持っている場合にのみ、この "updateicon"イベントをトリガします。

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