Метод jQuery val() для пользовательского объекта

Question

У меня есть объект ValueBox, который я создал следующим образом:

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

У меня есть событие изменения в конкретном экземпляре ValueBox, которое срабатывает всякий раз, когда $inputBox изменения, но функция обратного вызова изменения не может использовать метод val() в моем классе.Я предполагаю, что с помощью $(this).val() что я вызываю метод jQuery val(), который, конечно, не сработает.Можно ли получить доступ к методу val(), который я определил?

Answer 1

Когда ты звонишь $inputBox.change(), передай это ValueBox объект.Тогда позвони val на том.Таким образом, вам не придется беспокоиться о проблемах с областью действия элементов управления 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);
    }
});

Правильный способ расширения «родного» метода jQuery

Answer 3

Если вы действительно заинтересованы в расширении val() для вашего плагина, вы можете попробовать что-то вроде следующего:

Предположим, что вы установили и атрибут «значение» в самом внешнем элементе вашего плагина.

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

Если идентификатор моего экземпляра плагина — myValueBox, я смогу использовать val следующим образом:

$("#myValueBox").val()

У меня это сработало, но я не уверен, соответствует ли это вашим требованиям.

Answer 4

Я думаю, тебе стоит попробовать что-нибудь в этом роде

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

В прототипе вы определяете публичные методы, все, что есть в ValueBox функция является частной;