Estou criando um plugin simples com jQuery e Bootstrap, e em meu JavaScript tenho o seguinte trecho:
$.fn.myPlugin = function(options) {
var element = this;
var settings = $.extend({
param1: null,
param2: null,
minhaLabel1: $.fn.myPlugin.defaults.translate_MINHA_LABEL_1,
// Sequência de parâmetros
}, options);
// Funções de validação
// ...
// Eventos
// ...
// Funções privadas
// ...
// Funções Públicas
element.clearAll = function (){
console.debug('Elemento para ser limpo:', $(this));
// ...
};
// ...
// Start do Plugin
// ...
};
$fn.myPlugin.defaults = {
translate_MINHA_LABEL_1: 'Minha Label 1',
// ...
}
Ao usar o plugin tudo tem funcionado bem.
$('#minhaDiv').myPlugin({
param1: 'alguma_coisa',
param2: 'outra_coisa',
// ...
});
Gosto de setar todas as traduções na página de _Layout
, por isso criei a propriedade defaults
em myPlugin
, e tudo tem funcionado bem!
$.fn.myPlugin.defaults.translate_MINHA_LABEL_1 = '@Html.Raw(RESOURCES.LABEL_1)';
Agora eu gostaria de chamar a função clearAll
para elementos que já instanciaram myPlugin
de qualquer outro arquivo .js
.
Imagine o seguinte trecho:
Obs: Insiro uma nova classe pra cada elemento que chama myPlugin
.
$(".myPlugin").each(function(){
$(this).clearAll();
});
Bem, nesse caso tenho um erro, como se clearAll
não tivesse sido definido.
Então acrescentei o seguinte trecho abaixo de minha função pública clearAll
no arquivo do myPlugin
:
element.data({ clearAll: element.clearAll});
Agora eu posso executar a função da seguinte forma:
$(".myPlugin").each(function(){
$(this).data('clearAll')();
});
Mesmo tendo funcionado corretamente, achei um pouco feio. E gostaria de uma abordagem como:
$(this).myPlugin.clearAll();
Tentei então fazer da forma como estou usando os resources:
$.fn.myPlugin.clearAll= function () {
$(this).data('clearAll')();
};
Mas toda vez que chamo o trecho acima, o plugin é executado como se eu quisesse criar um novo myPlugin
.