2013-03-12 44 views
0

我想概括我的javascript插件,代码(从引导的工具提示插件,并采取改变了一点点):

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

的问题是,我想泛型化像“所有具有数据切换的元素都应调用与其数据切换属性命名相同的函数”。

通常情况下,

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

作品。但是我想知道我是否可以到达this['starConversation']中的单击元素的数据切换属性。我也试过这样:

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

然而$that变量不知何故没有starConversation函数的变量。 $.proxy函数(或因为on()函数)内的范围发生了变化?我不想在这里打破插件模式。可能吗?

回答

0

我认为当有人点击一个具有[data-toggle]属性的元素时,应该调用一个名称等于[data-toggle]值的函数。

可能的解决方案:

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

$元件是由在它的各种数据肘节元件的父容器。不幸的是,这个答案无济于事。 – px5x2 2013-03-13 07:45:27

+0

对不起,我的一方存在误解。你想调用'$ .proxy($ that [$(this).data('toggle')],$ that);'starConversation'内部还是只想访问数据切换属性? – zeroflagL 2013-03-13 08:45:59

+0

请检查编辑的答案。 – zeroflagL 2013-03-13 13:21:16