jQuery val () sur un objet personnalisé

Question

J'ai un objet appelé ValueBox que j'ai créé comme ceci:

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

J'ai un événement de changement sur une instance ValueBox particulière qui se déclenche chaque fois que les changements de $inputBox, mais la fonction de rappel de changement ne peut pas utiliser la méthode val () dans ma classe. Je suppose qu'en utilisant $(this).val() que j'appelle la méthode val () jQuery, ce qui bien sûr ne fonctionnerait pas. Est-il possible d'accéder à la méthode val () que je définissais?

Answer 1

Lorsque vous appelez $inputBox.change(), passer l'objet ValueBox. Ensuite, appelez val sur ce point. De cette façon, vous ne serez pas à vous soucier de problèmes au sein de la portée des contrôles 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);
    }
});

Une bonne façon de méthode étend jQuery "native"

Answer 3

Si vous êtes vraiment intéressé à étendre val () pour votre plug-in, vous pouvez essayer quelque chose comme ce qui suit:

Supposons que dans l'élément le plus externe de votre plugin que vous avez défini et attribut « valeur ».

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

Si l'id de mon exemple plugin est myValueBox alors je serais en mesure d'utiliser val de la manière suivante:

$ ( "# myValueBox"). Val ()

Il a travaillé pour moi, mais je ne suis pas sûr si elle répond à vos besoins.

Answer 4

Je pense que vous devriez essayer quelque chose comme ça

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

Dans le prototype, vous définissez les méthodes publiques, tout ce qui est en fonction ValueBox est privé;