jQuery val () en un objeto personalizado

Question

Tengo un objeto llamado ValueBox que he creado de esta manera:

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());
      }
   }
}

Tengo un evento de cambio en un caso particular ValueBox que dispara cada vez que cambia $inputBox, pero la función de cambio de devolución de llamada es incapaz de utilizar el método val () de la clase. Asumo que mediante el uso $(this).val() que estoy llamando el método jQuery val (), que por supuesto no iba a funcionar. ¿Es posible acceder al método val () que he definido?

Answer 1

Cuando se llama a $inputBox.change(), pasarlo al objeto ValueBox. A continuación, llame val en eso. De esta manera, usted no tendrá que preocuparse por la determinación del alcance problemas dentro de los controles de 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);
    }
});

Forma correcta extiende método jQuery "nativo"

Answer 3

Si usted está realmente interesado en la ampliación de val () para su plug-in, puede intentar algo como lo siguiente:

Supongamos que ha establecido y el atributo "valor" en el elemento más externo de su plugin.

jQuery.fn.extend({ val: function(newValue) {
    if (newValue == null) {
        return $(this).attr("value");
    } else {
        $(this).attr("value", newValue);        
    }
} 
});

Si el ID de mi instancia del complemento es myValueBox entonces yo sería capaz de utilizar val de la siguiente manera:

$ ( "# myValueBox"). Val ()

Se trabajó para mí, pero no estoy seguro si cumple con sus requisitos.

Answer 4

Creo que se debe tratar algo por el estilo

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);

En el prototipo se define métodos públicos, todo lo que está en función de ValueBox es privado;