jQuery $ .proxy和$ .on函数

Question

I wanted to generalize my javascript plugin, the code (taken from bootstrap's tooltip plugin and changed a little bit):

!function ($) {

   "use strict"; // jshint ;_;

   var Conversation = function (element, options) {
      this.init('conversation', element, options);
   };

   // PROTOTYPE DEFINITIONS

   Conversation.prototype = {

      constructor: Conversation,

      init: function (type, element, options) {

         this.type = type;
         this.$element = $(element);
         this.options = this.getOptions(options);
         var $that = $(this);


         this.$element.find('[data-toggle]').on('click', /*HERE*/);

      },

      getOptions: function (options) {
         return $.extend({}, $.fn[this.type].defaults, options, this.$element.data());
      },

      starConversation: function(e){

          console.log('starConversation called!');
      },

      selectConversation: function(e, arg){

         console.log('selectConversation called!');

      },

      selectAllConversations: function(e){
         console.log('selectConversation called!');
      }

   };


   $.fn.conversation = function ( option ) {
      return this.each(function () {
         var $this = $(this)
            , data = $this.data('conversation')
            , options = typeof option == 'object' && option;
         if (!data) $this.data('conversation', (data = new Conversation(this, options)));
         if (typeof option == 'string') data[option]()
      })
   };

   $.fn.conversation.Constructor = Conversation;

   $.fn.conversation.defaults = {
      selectAllButtonSel: '#selectAll'
   };


}(window.jQuery);

the problem is I wanted to generify like "all elements having data-toggle should call the function which is named the same as their data-toggle attribute".

Normally,

this.$element.find('[data-toggle]').on('click', $.proxy(this['starConversation'], this));

works. But I wonder whether I can reach clicked element's data-toggle attribute inside this['starConversation'] . I tried also this:

$.proxy($that[$(this).data('toggle')], $that);

however $that variable somehow do not have starConversation function variable. Is scope is changed inside $.proxy function (or because of on() function)? I do not want to break the plugin pattern here. Is it possible?

Answer 1

I assume that when someone clicks on an element with a [data-toggle] attribute a function should be called whose name equals that of the value of [data-toggle] .

Possible solution:

this.$element.find('[data-toggle]').on('click', function(event) {
  var methodName = $(this).data('toggle');
  $that[methodName](event);
});