jquery插件如何維護對象的狀態

Question

我想創建一個簡單的插件，並且我已經遇到了應該如何管理插件狀態的問題。

(function ($) { 
// Static things for plugin goes here 
var uiHtml = "<div class='gaw-box'>" + 
     "</div>"; 



var methods = { 


    init: function (options) { 

     return this.each(function() { 
      // Create UI 
      $(this).html(uiHtml); 

      if (options) { 

       var defaults = { 
        name:"N/A" 
       }; 

       var opt = $.extend(defaults, options); 
        $(this).find(".gaw-name").html(opt.name); 
      } 

      // Visual Events attach 
      var uiobj = $(this).find(".gaw-box"); 
      $(uiobj).mouseenter(function() { 
       if (!this.isSelected) { 
        $(this).css('border', '1px solid red'); 
       } 
      }); 

      $(uiobj).mouseleave(function() { 
       if (!this.isSelected) { 
        $(this).css('border', '1px solid black'); 
       } 
      }); 

      $(uiobj).click(function() { 
       this.isSelected = !this.isSelected; 
       if (this.isSelected) { 
        $(this).css('border', '3px solid red'); 
       } 
       else { 
        $(this).css('border', '1px solid black'); 
       } 

      }); 

      }); 

    }, 
    getIsSelected: function (options) { 

     return this.isSelected; // ALWAYS FALSE 
    }, 
    destroy: function() { } 
}; 

$.fn.gateaway = function (method) { 
    var plugin = this; 

    plugin.isSelected = false; 

    if (methods[method]) 
    { 
     return methods[method].apply(plugin, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(plugin, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.pluginName'); 
    } 
}; 
})(jQuery); 

我想要實現的是保存插件（對象）的狀態，如果它被選中例如或不。 我打電話我的插件像

$("#gate").gateaway('getIsSelected') 

結果總是，假的......我知道，問題是「這個」範圍，這個問題，這是我第一次在客戶端開發，以及第二我需要今天完成它:-)，所以如果有可能指出我在哪裏或如何組織插件，以便能夠保存每個插件的狀態，它將節省我:-)

Answer 1

看看官方jQuery關於在插件中存儲狀態的文檔：http://docs.jquery.com/Plugins/Authoring#Data

Answer 2

官方的jQuery建議是使用jQuery UI Widget Factory作爲它給你很多很好的選擇來存儲狀態（以及其他的東西），但是使用數據功能在jQuery元素上存儲狀態並不難，如下所示：

$.fn.myplugin = function (options) { 

    var create = function (el, options) { 
     // Find existing state if we're running this again on same element 
     var state = el.data("myplugin") || {}; 

     makeActualPlugin(el, state); 

     state.something = "Store me for later"; 
     el.data("myplugin", state); 
     return el; 
    }; 

    this.each(function() { 
     create($(this), options); 
    }); 
};