Attacher une variable à un élément HTML

[titmael]

Bonjour à tous,

je continue sur ma lancée des plugins JQuery (que je réalise pour mes besoins) et je souhaitais utiliser les même principes que le flexigrid pour accéder à des méthodes mais je me heurte à un problème.

J'ai une fonction JQuery "filters" qui créer un div et fait ce qu'il à faire dedans.
Et j'ai 2 autres fonctions qui permettent en théorie de mettre à jour les options de mon "filters" et de le recharger (recharger l'IHM de ce div).

Sauf que lorsque j'essaye d'accéder à la variable params de mon élément HTML, elle n'existe pas, pourtant en débug, lorsque je fais "this.params = params;" dans la partie "filters", je vois bien que la variable params est attachée à mon élément HTML.

Ma question est donc : wtf ? Pourquoi je n'arrive pas à récupérer cette variable en faisant "this.params" dans les fonctions "filtersOptions" et/ou "filtersReload" ?

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
(function($) {
		/*JQUERY PLUGGIN*/
		$.fn.filters = function(params) {
			/*Parameters*/
			params = $.extend({
				title: '',
				category: '',
				filters: [],
				open: true
			},params);
 
			/*No action so we init the container*/
			if((typeof params)!="string"){
				/*Change the container class*/
				$(this).addClass("activeFilters");
				/*Create the title*/
				$(this).append(CreateDivTitle(params));
				/*Create the content*/
				$(this).append(CreateDivContent(params));
			}else{
				//Action asked
 
			}
			this.params = params;
			return this;
		};	
		$.fn.filtersOptions = function (params) { //function to update general options
			return this.each(function () {
				$.extend(this.params, params);
			});
		};
		$.fn.filtersReload = function (params) { //function to update content
			return this.each(function () {
				$.extend(this.params, params);
				$("#activeFiltersContent").remove();
				/*Re create the content*/
				$(this).append(CreateDivContent(this.params));
			});
		};
})(jQuery);

Code :

1
2
3
$('#activeFilters').filters({title: filtersTitle[0], category: filterAll[0], open: true});
var arrayTest = ['Severité 1','Site : Tours'];
$('#activeFilters').filtersOptions({filters: arrayTest});

NB : le code est toujours en développement. Les fonctions Create[...] ne font qu'insérer du HTML.

Merci à tous et joyeux noël en léger retard puisque je n'ai pas eu l'occasion de vous le souhaiter

[danielhagnoul]

Bonsoir

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
(function($) {
	$.fn.filters = function(params){
 
		// modifie $.fn.filters.params avec params
		$.extend($.fn.filters.params, params);
 
		return this;
	};
 
	$.fn.filtersOptions = function(params){
		// modifie $.fn.filters.params avec params
		$.extend($.fn.filters.params, params);
 
		return this;
	};
 
	$.fn.filtersReload = function(params) {
 
		return this.each(function(){
			// modifie $.fn.filters.params avec params
			$.extend($.fn.filters.params, params);
 
			$(this).append( CreateDivContent($.fn.filters.params) );
		});
	};
 
	// la version par défaut
	$.fn.filters.params = {
		"title": '',
		"category": '',
		"filters": [],
		"open": true
	};
})(jQuery);

[titmael]

Mais est ce que cela fait que params est lié au composant auquel j'applique mon pluggin "filters" ? J'en ai pas l'impression.
Parce que si j'ai plusieurs appels à mon pluggin dans la même pages, tous mes composants vont partager les mêmes options ?

[danielhagnoul]

Envoyé par titmael

[...], tous mes composants vont partager les mêmes options ?

Oui !

[titmael]

Comment faire alors pour que "params" ne soit lié qu'à l'élement HTML auquel j'applique mon pluggin ?

[SpaceFrog]

data() ...

[titmael]

J'ai bien essayé de mettre un

Code :

$(this).data('params',params);

à la place de

Code :

this.params = params;

Mais ça ne change rien ... je vois pas si je m'y prend mal ou non

[danielhagnoul]

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
(function($) {
	$.fn.filters = function(params){
 
		return this.each(function(i, item){
			// $.fn.filters.params n'est plus modifié par params
			var opts = $.extend(true, {}, $.fn.filters.params, params);
 
			$(item).data("params", opts);
		});
	};
 
	$.fn.filtersOptions = function(params){
 
		return this.each(function(i, item){
			var opts = $(item).data("params");
 
			// on modifie les options existantes
			$.extend(opts, params);
 
			// on sauvegarde les modifications
			$(item).data("params", opts);
		});
	};
 
	$.fn.filtersReload = function() {
 
		return this.each(function(i, item){
			$(item).append( CreateDivContent( $(item).data("params") ) );
		});
	};
 
	// la version par défaut
	$.fn.filters.params = {
		"title": '',
		"category": '',
		"filters": [],
		"open": true
	};
})(jQuery);