在jQuery插件小部件中从每个访问类

I would like to access the this.options variable from within a each loop. I am using the jQuery ui Widget Factory pattern.

我想从每个循环中访问this.options变量。我正在使用jQuery ui Widget Factory模式。

// etc..
,
_buildThumbs: function() {

$.each(this.options.photos, function( i, photo ) {

    // Modify template html...
    // ...


    $(this.options.containerThumbsClass).append( thumbnail );
    // Oh my, this.options is undefined :(
});

So what is the best way to access the options? Maybe pass the class reference to the each method? Thanks.

那么访问选项的最佳方式是什么?也许将类引用传递给每个方法?谢谢。

1 个解决方案

#1

That's because jquery 'each' function has it's own context. Try this:

那是因为jquery'each'函数有它自己的上下文。试试这个:

_buildThumbs: function() {
var localOptionsVariable = this.options;
$.each(this.options.photos, function( i, photo ) {    
    $(localOptionsVariable.containerThumbsClass).append( thumbnail );
});

But the best way is to have a function within your plugin that will return options object. For instance, you can store options in the root element data.

但最好的方法是在你的插件中有一个返回选项对象的函数。例如,您可以在根元素数据中存储选项。

[Edited]

(function ($) {
    var PLUGIN_NAMESPACE = "your-plugin-namespace";
    var defaultOptions = {
        someOption: 'DefaultOptionValue'
    };
    var isIE = /msie/.test(navigator.userAgent.toLowerCase());

    $.extend($.fn, {
        setTestPlugin: function (options) {
            options = $.extend({}, defaultOptions, options);
            return this.each(function () {
                var $container = $(this);
                $container.addClass(PLUGIN_NAMESPACE);
                $container.data("options", options);

                $container.val('Plugin applied!')
                $container.on('click', function(){
                  $container.someOtherFunction();
                });
            });
        },
        getOptions: function () {
            return this.data("options");
        },
        someOtherFunction: function () {
            var $container = this;
            var options = $container.getOptions();
            $.each([0], function(i, item){
              alert(options.someOption);
            });
            
        },
    });

})(jQuery);

$('#textBoxNewOption').setTestPlugin({someOption: 'New option value'});
$('#textBoxDefault').setTestPlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="textBoxDefault" />
<input type="text" id="textBoxNewOption" />

#1