Método jQuery val () em um objeto personalizado

Question

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?

Answer 1

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.

Answer 2

$.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"

Answer 3

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.

Answer 4

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;