Использование функций внутри плагина

Question

я написал небольшой плагин для кнопки jQuery - он содержит метод для применения функции onclick - вот код

(function ($) {
  $.fn.tButton = function () 
  {
    this.setFN = function(fn)
    {
        alert("function set.");
    }
  };

})(jQuery);

Я использую этот код для его инициализации (в div):

var button = $("#myButton").tButton();

Теперь проблема: при попытке применить функцию setFN:

button.setFN(function(){dosomething();});

Я получаю сообщение об ошибке: button.setFN is not a function

Я уже попробовал this.bind, но не помог. кто-нибудь знает в чем дело?

Answer 1

Вы ничего не возвращаете из функции tButton, поэтому значение tButton не соответствует вашему. Попробуйте вернуть this из tButton (), чтобы вернуть объект jQuery из него. Кроме того, я не думаю, что это хороший способ сделать это, поскольку вы в основном расширяете jQuery нестандартным способом. Лучше было бы, чтобы tButton принял функцию обратного вызова в качестве аргумента и применил ее только к соответствующим элементам. Я бы также использовал другой шаблон для определения плагина (аналогично плагинам пользовательского интерфейса).

(function ($) {
  $.fn.extend( {
      tButton: function(callback) {
          return this.each( function() {
             new $.TButton(this,callback);
          });
      }
  });

  $.TButton = function(elem,callback) {
       $(elem).click(callback);
  };
})(jQuery);

Answer 2

Вот шаблон, который вы можете использовать для этого:

$.TButton = function(el){
    var $el = $(el);
    $el.data('TButton', this); // Store a reference to the TButton object on the DOM element
    // Use this.functionName to make it "public"
    this.setFN = function(callback){
       // Namespace the click events so you don't accidently remove
       // other click events bound to the button.
       $el.unbind('click.tbutton').bind('click.tbutton', callback );
    }
}

$.fn.tButton = function(func){
   return this.each(function(){ // Don't break the chain
      if(! func){ // If no parameter is passed, this is a constructor
        (new $.TButton(this));
      } else { // If the parameter (expected to be a function), call setFN
         var button = $(this).data('TButton');
         if(button) button.setFN(func);
      }
   });          
}

Теперь вы можете инициализировать, используя это:

$("button").tButton();

И может позвонить setFN двумя способами:

$("button").tButton(function(){ ... });
// or
$("button").data('TButton').setFN( function(){ ... } );

Answer 3

Функция tButton. Если читать следующим образом:

var button = $("#myButton").tButton(function(){dosomething();});