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

Question

я написал немного Jquery кнопку плагин - он содержит метод нанесения OnClick-функции - вот код

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

})(jQuery); 

Я использую этот код, чтобы инициализировать его (на дел):

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

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

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

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

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

Answer 1

Функция tButton. Если следует читать так:

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

Answer 2

Вы ничего из функции TButton не возвращаются поэтому значение TButton не то, что вы думаете. Попробуйте вернуть из 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 3

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

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