Método jQuery val () em um objeto personalizado
-
19-09-2019 - |
Pergunta
Eu tenho um objeto chamado ValueBox que eu criei assim:
function ValueBox(params) {
...
$.extend(true, this, $('/* some HTML elements */'));
...
var $inputBox = $('input[type=text]', this);
...
this.val = function(newValue) {
if(typeof newValue == "number") {
$inputBox.val(newValue);
$inputBox.change();
} else {
return parseFloat($inputBox.val());
}
}
}
Eu tenho um evento de mudança em uma instância de caixa de valores específica que dispara sempre que o $inputBox
Alterações, mas a função de retorno de chamada de alteração é incapaz de usar o método Val () na minha classe. Presumo que usando $(this).val()
Que estou chamando o método jQuery val (), que obviamente não funcionaria. É possível acessar o método Val () que eu defini?
Solução
Quando Você ligar $inputBox.change()
, passe o ValueBox
objeto. Então ligue val
naquilo. Dessa forma, você não precisará se preocupar com problemas de escopo nos controles do jQuery.
Outras dicas
$.fn.yourpluginscope.originalVal = $.fn.val;
$.fn.extend({
val: function (value) {
if (/* detect your plugin element */)
{
if (value == undefined)
return /* getter */;
return $.fn.yourpluginscope.originalVal.call(/* setter */, value);
}
return $.fn.yourpluginscope.originalVal.call(this, value);
}
});
Maneira adequada de estender o método jQuery "nativo"
Se você está realmente interessado em estender Val () para o seu plug -in, pode tentar algo como o seguinte:
Vamos supor que você definiu e atribua "Valor" no elemento mais externo do seu plug -in.
jQuery.fn.extend({ val: function(newValue) {
if (newValue == null) {
return $(this).attr("value");
} else {
$(this).attr("value", newValue);
}
}
});
Se o ID da minha instância do plug -in for MyValueBox, eu seria capaz de usar Val da seguinte maneira:
$ ("#myValueBox"). Val ()
Funcionou para mim, mas não tenho certeza se atende aos seus requisitos.
Eu acho que você deveria tentar algo assim
function ValueBox(params) {
...
$.extend(true, this, $('/* some HTML elements */'));
...
this.inputBox = $('input[type=text]', this);
...
}
ValueBox.prototype.val = function(newValue) {
if(typeof newValue == "number") {
this.inputBox.val(newValue);
this.inputBox.change();
} else {
return parseFloat(this.inputBox.val());
}
};
// then this should work
var test = new ValueBox();
test.val(123);
No protótipo, você define métodos públicos, tudo o que está em ValueBox
A função é privada;