Conseil pour plugin jquery avec POO

Version imprimable

Salut à tous,

J'aimerai bien quelques conseils pour bien developpez un plugin jquery en POO, Voici la structure de base :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
(function($){
 
 var methods = {
    init : function( options ) {
 
       // Create some defaults, extending them with any options that were provided
       var settings = $.extend( {
         authentification:false
       }, options);
 
       //this.show();
 
       return this.each(function(){
 
          $(this).on('dblclick',function() {
	       	var item = $(this);
	       	item.after('<a href="#" class="ec-input-validation"/></a>');
	  });
 
	   $('.ec-input-validation').live('click',function() {
		    this.update();
		    return false;     
           });
 
          });
 
 
    },
    show : function( ) {},
    hide : function( ) {},
    update : function( ) {
        $.ajax({
        });
    }
};
 
$.fn.editcontent = function(method){
 
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' + method + ' does not exist !' );
    }
 
};
 
})(jQuery);

A priori j'aimerai pouvoir appeler la fonction "show" par exemple, dans le init, pour faire de la POO comme en php quoi.

Et evidemment, le $('.ec-input-validation').live se lance à chaque tour de boucle, alors qu'il faudrait qu'il le fasse une seul fois... pour mettre à jour la bdd.

Une idée, un conseil ?

Merci
F.

Le live en jquery

Code:

1
2
 
.live( events, data, handler(eventObject) )

Le handler te permet de function un callBack sur une function donc tu peux a partir de la désactiver ce que tu souhaite (supprimer un object, supprimer un event...).

Pour appeler de ta function this.show(); la ou tu le souhaitait j'aurais fait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
(function($){
 
	 var methods = {
	    init : function( options ) {
 
	       // Create some defaults, extending them with any options that were provided
	       var settings = $.extend( {
	         authentification:false
	       }, options);
 
	       this.show();
 
	       return $(this).each(function(){
 
	 			alert("dans return each function");
 
	 			$("#double").live('dblclick',function() {
				    var item = $(this);
				    item.after('<a href="#" class="ec-input-validation"/></a>');
				  });
 
				  $('.ec-input-validation').live('click',function() {
					  this.update();
					  return false;     
			       });
			});
 
	    },
	    show : function( ) {alert("ok show");},
	    hide : function( ) {},
	    update : function( ) {
	        $.ajax({
	        });
	    }
	};
 
	$.fn.editcontent = function(method){
 
	    if ( methods[method] ) {
	      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
	    } else if ( typeof method === 'object' || ! method ) {
	      return methods.init.apply( this, arguments );
	    } else {
	      $.error( 'Method ' + method + ' does not exist !' );
	    }
 
	};
	alert(methods.init());
	})(jQuery);

21/09/2012, 09h26
__fabrice
Salut,

Merci pour ton message. Par contre, si tu n'appelles pas la fonction init comme çà :
Code:

1 2 3 4 }; methods.init(); })(jQuery);
l'appel à this.show() ne se fait pas. Et tu perds l'interet de plugin. Ensuite, par contre, le this.update ne fonctionne pas non plus, probleme de contexte.
J'ai essayé de sauvegarder this, pour l'appeller ailleurs, là aussi çà ne fonctionne pas.

Merci
F.
21/09/2012, 10h41
Macmillenium

Hello,

Je te conseille plutôt d'utiliser jQuery Boilerplate qui permet d'avoir une approche OO.