0

我正在使用这样的插件结构：

(function( $, window) { 
    $.widget("mobile.multiview",$.mobile.widget, {
        options: {  
           switchable: false,           
           },
        create: function() {
           var self = this;
           // returns false
           console.log(self.options.switchable)
           },
        bindings: function() {
           $(document).on( "pagebeforechange", function( e, data ) {
              var self = this,
                  $link = self.options.switchable;
              // this is undefined, when the event fires - function fails
              console.log( $link )  
              });
           }
        }) 
     }) (jQuery,this);

我不明白，选项如何变为undefined。我有很多选择，如果我在 pagebeforechange 事件中控制它们，它们都是未定义的。

他们似乎在其他地方都可以工作，所以我不知道他们为什么在这里失败。有什么想法可以引导我走向正确的方向吗？

4

2 回答 2

1

this将是文档而不是小部件，您的范围不同。

只需重新阅读您的代码$(document).on(... var self = this。在create方法中分配this一个变量，该变量将在其他地方可用。

有关如何在此处保留上下文的一些信息：

如何在 jquery 中保留“this”的上下文

要解决此问题，您也可以将 self 声明移出闭包：

    bindings: function() {
       var self = this;
       $(document).on( "pagebeforechange", function( e, data ) {
          var $link = self.options.switchable;
          console.log( $link ); 
       });
    }
于 2012-04-18T08:57:44.353 回答
1

我用于所有 jQuery 插件的插件模板是这样的：

(function($){

$.fn.widget = function(options){
   var opts = $.extend({}, $.fn.widget.defaults, options);

return this.each(function(){
   //get a reference to the DOM element.
   var obj = $(this);
   //because you extended your options into your defaults, you can use them like this
   var isSwitchable = opts.switchable; 
};
};
//private function
function sayHello(name){
   alert(name);
};
//public functions
$.fn.widget.sayHello = function(name){
   alert("hello" + name);
};
//default settings
$.fn.widget.defaults = {
    switchable: false
};
})(jQuery);

您可以通过调用 opts 变量在插件中使用您的选项。

于 2012-04-18T09:06:23.553 回答