Metodi di chiamata che utilizzano il modello di progettazione jQuery Plugin

Question

Ho usato il jQuery Boilerplate per lo sviluppo di plugin e una cosa che non riesco a capire è come chiamare metodi dall'esterno del plugin.

Per riferimento, ecco il codice boilerplate sto parlando: http://jqueryboilerplate.com/

Nel mio violino,

http://jsfiddle.net/D9JSQ/2/

Ecco il codice:

;(function ($, window, document, undefined) { 

    var pluginName = 'test'; 
    var defaults; 

    function Plugin(element, options) { 
     this.element = element; 

     this.options = $.extend({}, defaults, options) ; 

     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype = { 
     init: function() { 
      this.hello(); 
     }, 
     hello : function() { 
      document.write('hello'); 
     }, 
     goodbye : function() { 
      document.write('goodbye'); 
     } 
    } 


    $.fn[pluginName] = function (options) { 
      return this.each(function() { 
       if (!$.data(this, 'plugin_' + pluginName)) { 
        $.data(this, 'plugin_' + pluginName, 
        new Plugin(this, options)); 
       } 
      }); 
    } 


})(jQuery, window, document); 

$(document).ready(function() { 
    $("#foo").test(); 
    $("#foo").test('goodbye'); 
}); 

I Sto cercando di chiamare il metodo addio usando la seguente sintassi:

$("#foo").test('goodbye') 

Come ottengo questo? Grazie in anticipo

Answer 1

Dovrai ottenere un riferimento alla classe per chiamare il suo metodo con quella struttura di plugin.

http://jsfiddle.net/D9JSQ/3/

$(document).ready(function() { 
    var test = $("#foo").test().data("plugin_test"); 
    test.goodbye(); 
}); 

di fare ciò che si vuole, è necessario sbarazzarsi di document.write per testarlo.

http://jsfiddle.net/D9JSQ/8/

; 
(function($, window, document, undefined) { 

    var pluginName = 'test'; 
    var defaults; 

    function Plugin(element, options) { 
     this.element = element; 

     this.options = $.extend({}, defaults, options); 

     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype = { 
     init: function(name) { 
      this.hello(); 
     }, 
     hello: function(name) { 
      console.log('hello'); 
     }, 
     goodbye: function(name) { 
      console.log('goodbye'); 
     } 
    } 


    $.fn[pluginName] = function(options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
      } 
      else if ($.isFunction(Plugin.prototype[options])) { 
       $.data(this, 'plugin_' + pluginName)[options](); 
      } 
     }); 
    } 


})(jQuery, window, document); 

$(document).ready(function() { 
    $("#foo").test(); 
    $("#foo").test('goodbye'); 
});​ 

sguardo alla console per informazioni.