无法读取undefined的属性'url'。 jQuery加载小部件失败

Question

我正在尝试在jQuery中构建一个小部件来处理内容加载到页面上的某些div。我这样做的原因是保持我的代码干。我或许应该提一下，我使用HeadJS进行javascript加载。

这是我的小部件代码：

(function ($, window, document, undefined) {

    $.widget ("my.contentloader", {

        options: {

            loadingMessage: true,

            errorDiv: '#error',

            contentDiv: '#content'

        },

        _create: function () {

            $.ajax ({

                type: "POST", 

                url: self.options.url, 

                data: {limit: self.options.params.limit, offset: self.options.params.offset},

                beforeSend: function (html) {

                    // Check if loading message should be displayed

                    if (self.options.loadingMessage) {

                        $(self.options.contentDiv).html ("<div id='loading'>Loading</div>");

                    }

                },

                success: function (html) {

                    if (self.options.loadingMessage) {

                        $('#loading').remove ();

                    }

                    $(self.options.contentDiv).html (html);

                },

                error: function (html) {

                    $(self.options.errorDiv).html (html);

                }

            });

        },

        _setOption: function (key, value) {

            this.options[key] = value;

            $.Widget.prototype._setOption.apply (this, arguments);

    }

    });

})(jQuery, window, document);

我在调用页面上包含此小部件文件和jquery。然后我使用这样的插件：

 $(window).contentloader ({

  url: 'loading/content/url'

 });

问题是我收到了这个错误：

Uncaught TypeError: Cannot read property 'url' of undefined

Answer 1

你没有在任何地方定义self，所以你得到了window.self而那是

  

对窗口对象的对象引用。

并且没有options属性。您应该使用this而不是self;如果您需要在回调中强制使用特定this，请执行以下操作：

var _this = this; // or 'var that'

在定义回调之前使用_this（或that）：

_create: function () {
    var _this = this;
    $.ajax ({
        // ...
        beforeSend: function (html) {
            if (_this.options.loadingMessage) {
                //...

window.self的出现使var self成为一个糟糕的名字选择。