Puis-je remplacer ou modifier une fonction sur un widget jQuery UI? Comment? (Monkey Patcher)

Question

Si je veux modifier une partie de la capacité d'un objet jQuery UI, en remplaçant l'une des fonctions, comment pourrais-je aller sur le faire?

Exemple: supposons que je voulais modifier la façon dont le widget autocomplete jQuery a rendu les suggestions. Il y a une méthode sur l'objet autocomplete qui ressemble à ceci:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

Puis-je remplacer?

Je pense que cela pourrait être appelé Correctif singe .

Comment? Qu'est-ce que la syntaxe devrais-je utiliser?

Answer 1

Je ne sais pas jQuery UI, mais en général, voici comment vous redéfinissez une fonction:

(function() {
   var _oldFunc = _renderItem;

   _renderItem = function(ul,item) {
      // do your thing
      // and optionally call the original function:
      return _oldFunc(ul,item);
   }
})();

La raison pour cela est enveloppé dans une fonction anonyme est de créer une fermeture pour le stockage de la fonction d'origine. De cette façon, il ne peut jamais interférer avec les variables globales.

---

EDIT Pour ce faire, une note de bas sur un widget jQuery UI, utilisez la syntaxe suivante:

Pour votre information: la façon de saisir la fonction est comme ceci:

function monkeyPatchAutocomplete() { 

  // don't really need this, but in case I did, I could store it and chain 
  var oldFn = $.ui.autocomplete.prototype._renderItem; 

  $.ui.autocomplete.prototype._renderItem = function( ul, item) { 
     // whatever
  }; 
} 

Answer 2

Je sais qu'il est une vieille question, mais je dû corriger quelques bugs sur un vieux projet et avait un problème avec ce genre de patch.

Mieux faire la fonction disponible dans les options objet, puis y mettre votre logique spécifique.

Patch:

(function monkeyPatchJQueryAutocomplete($) {

  /**
   * Proxies a private
   * prototype method to the
   * options Object
   *
   * @param  {Object} obj
   * @param  {String} funcName
   */
  function proxyPrivateMethodToOptions(obj, funcName) {
    var __super = obj.prototype[funcName];
    obj.prototype[funcName] = function() {
      if (this.options[funcName]) {
        return this.options[funcName].apply(this, arguments);
      }
      return __super.apply(this, arguments);
    };
  }

  // Make the private _renderItem
  // method available through the options Object
  proxyPrivateMethodToOptions($.ui.autocomplete, '_renderItem');

  // We can do this for other methods as well:
  proxyPrivateMethodToOptions($.ui.autocomplete, '_renderMenu');

}($));

Utilisation-Exemple:

$('.some-input').autocomplete({
  _renderItem: function(ul, item) {
    console.log('here we can reference the old func via: ', __super);
    return $("<li>")
      .append($("<a>").text(item.label))
      .appendTo(ul);
  }
});