Plugin JQuery personnalisé, exposer des méthodes et stocker des informations sur les éléments

J'écris mon premier plug-in jQuery, mais j'ai rencontré quelques problèmes. Dans ma première tentative j'ai implémenté avec succès le plug-in de base, mais maintenant je dois exposer des méthodes supplémentaires pour le client à utiliser.Plugin JQuery personnalisé, exposer des méthodes et stocker des informations sur les éléments

Après de nombreux articles, des messages stackoverflow, et en lisant la documentation, j'ai pensé que je pouvais créer un objet et le stocker dans le cache de l'élément .data(). Cependant, le code que j'ai écrit semble référencer le même objet quand j'appelle mon plug-in. Il est vrai que je suis encore dans les phases d'apprentissage de jQuery, donc ma terminologie fait défaut et google n'a pas été capable de passer à travers pour moi.

var CONST_TEST_KEY = "test-data-key"; 

(function($){ 
var TestObject = function(e, o){ 
    var elem = $(e); 

    this.random = Math.floor(Math.random() * 100); 

    this.GetRandom = function() { 
     alert(this.random); 
    } 
}; 

$.fn.testJQueryPlugin = function(o) { 
     return $.each(function() { 
      var currentElement = $(this); 

      if(currentElement.data(CONST_TEST_KEY)) 
       return; 

      currentElement.data(CONST_TEST_KEY, new TestObject(currentElement, {})); 
     }); 
}; 
})(jQuery)

Le code HTML:

<script type="text/javascript"> 
    $(document).ready(function() { 
     var object1 = $("#entry1").testJQueryPlugin(); 
     var object2 = $("#entry2").testJQueryPlugin(); 

     alert($(object1).data(CONST_TEST_KEY).random); 
     alert($(object2).data(CONST_TEST_KEY).random); 
    }); 
</script> 
</head> 
<body> 
    <div id="entry1"> 
     x 
    </div> 
    <div id="entry2"> 
    y 
    </div> 
</body>

Ce code affiche deux alertes les deux ont la même valeur. Je m'attendais à ce que chaque alerte ait une valeur différente. J'apprécierais toutes les solutions, les pointeurs, et même une meilleure explication pourquoi cela fonctionne de cette façon et/ou pourquoi je devrais le faire différemment.

Source

2010-11-05 Skyler

Au moins un problème immédiat que je vois est dans votre appel à each(). Il semble que vous mélangez jQuery.each() (une fonction d'itérateur générique) et .each(). Vous ne passez même pas un premier argument approprié à jQuery.each(), donc il ne répète pas ce que vous pensez qu'il est. Essayez ceci sur la taille:

http://jsfiddle.net/mattball/xaydr/

(comprend un autre nettoyage aussi bien, comme la fourniture Enchaînement appropriée en utilisant return this;)

Source

2010-11-05 04:57:19

Merci pour la réponse rapide. Maintenant, je me sens stupide, dans mon plug-in, je l'utilise correctement, mais dans mon POC, j'ai raté ça. – Skyler

@Skyler: de rien. Couper-coller est toujours mieux que d'essayer de retaper en posant des questions sur SO :) –

Le problème est que votre appel à each() manque un paramètre. Le premier paramètre est la collection sur laquelle itérer, et le deuxième paramètre est la fonction à appeler.

Il devrait ressembler à ceci:

$.fn.testJQueryPlugin = function(o) { 
    return $.each(this, function() { 
     var currentElement = $(this); 

     if(currentElement.data(CONST_TEST_KEY)) 
      return; 

     currentElement.data(CONST_TEST_KEY, new TestObject(currentElement, {})); 
    }); 
};

see it in action at JSFiddle

Source

2010-11-05 04:54:52 Lee

Je dirais que [l'autre '.each()'] (http: //api.jquery.com/each) est celui qui devrait être utilisé dans ce cas - pas la fonction d'itérateur générique. –

Plugin JQuery personnalisé, exposer des méthodes et stocker des informations sur les éléments

Répondre

Questions connexes