Question

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

(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事件中对它们进行控制，它们都是未定义的。

他们似乎在其他地方工作，所以我对他们为什么在这里失败一无所知。任何可以引导我进入正确指挥的想法？

Answer 1

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

重新阅读您的代码$(document).on(... var self = this。在create方法中，将this分配给可在其他位置使用的变量。

有关如何保持上下文的一些信息：

How can I keep the context of 'this' in jquery

要解决此问题，您还可以将自我声明移出闭包：

    bindings: function() {
       var self = this;
       $(document).on( "pagebeforechange", function( e, data ) {
          var $link = self.options.switchable;
          console.log( $link ); 
       });
    }

Answer 2

我用于所有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变量来使用插件中的选项。

如何将jquery插件选项变为未定义？

2 个答案: