jQuery val () metodo su un oggetto personalizzato

Question

Ho un oggetto chiamato ValueBox che ho creato in questo modo:

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

Ho un evento di modifica su una particolare istanza ValueBox che spara ogni volta che cambia $inputBox, ma la funzione di cambio di callback è in grado di utilizzare il metodo val () nella mia classe. Presumo che usando $(this).val() che sto chiamando il metodo jQuery val (), che ovviamente non avrebbe funzionato. E 'possibile accedere al metodo val (), che ho definito?

Answer 1

Quando si chiama $inputBox.change(), passarlo l'oggetto ValueBox. Quindi chiamare val su questo. In questo modo, non dovrete preoccuparvi di scoping problemi all'interno dei controlli 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);
    }
});

modo corretto di estende metodo di jQuery "nativo"

Answer 3

Se siete veramente interessati ad estendere val () per il vostro plugin, si può provare qualcosa di simile al seguente:

Supponiamo di aver impostato e l'attributo "value" nell'elemento più esterno del plugin.

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

Se l'id del mio esempio plugin è myValueBox poi mi sarebbe in grado di utilizzare val nel modo seguente:

$ ( "# myValueBox"). Val ()

Ha funzionato per me, ma io non sono sicuro se soddisfa le vostre esigenze.

Answer 4

Credo che si dovrebbe provare qualcosa di simile

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

Nel prototipo di definire metodi pubblici, tutto ciò che è in funzione ValueBox è privato;