0

我正在编写一个用于工作的 jQuery 插件，它使用 Google 的 Feed API 提取 RSS 提要数据。使用此 API，我将所有相关的 RSS 提要数据保存到一个对象中，然后通过方法对其进行操作。我有一个功能应该将 RSS 提要呈现到网页上。不幸的是，当我尝试显示单个 RSS 提要条目时，出现错误。这是我的相关代码：

var RSSFeed = function(feedTitle, feedUrl, options) {
/*
 * An object to encapsulate a Google Feed API request.
 */

// Variables
this.description = "";
this.entries = [];
this.feedUrl = feedUrl;
this.link = "";
this.title = feedTitle;
this.options = $.extend({
    ssl : true,
    limit : 4,
    key : null,
    feedTemplate : '<article class="rss-feed"><h2>{title}</h1><ul>{entries}</ul></article>',
    entryTemplate : '<li><h3><a href="{link}">{title}</a></h3><p>by: {author} @ {publishedDate}</p><p>{contentSnippet}</p></li>',
    outputMode : "json"
}, options || {});

this.sendFeedRequest = function() {
    /*
     * Makes the AJAX call to the provided requestUrl
     */

    var self = this;
    $.getJSON(this.encodeRequest(), function(data) {
        // Save the data in a temporary object
        var responseDataFeed = data.responseData.feed;

        // Now load the data into the RSSFeed object
        self.description = responseDataFeed.description;
        self.link = responseDataFeed.link;
        self.entries = responseDataFeed.entries;
    });
};

this.display = function(jQuerySelector) {
    /*
     * Displays the RSSFeed onto the webpage
     * Each RSSEntry will be displayed wrapped in the RSSFeed's template HTML
     * The template markup can be specified in the options
     */

    var self = this;
    console.log(self);
    console.log(self.entries);
};
};

$.rssObj = function(newTitle, newUrl, options) {
    return new RSSFeed(newTitle, newUrl, options);
};

// Code to call the jquery plugin, would normally be found in an index.html file
rss = $.rssObj("Gizmodo", "http://feeds.gawker.com/Gizmodo/full");
rss.sendFeedRequest();

rss.display($('div#feed'));

显然，我的display()功能还没有完成，但它是一个很好的例子。第一个console.log()会将所有相关数据写入控制台，包括entries数组。但是，当我尝试自己记录entries数组时，它返回一个空数组。知道为什么吗？

4

1 回答 1

1

我想问题是在display()没有等待 AJAX 请求完成的情况下调用它。因此，当您已经尝试访问时，请求仍在运行entries- 因此是空数组。

为了解决这个问题，您可以将调用display()移至$.getJSON(). 您只需添加所需的选择器作为参数：

this.sendFeedRequest = function(selector) {
    var self = this;
    $.getJSON(this.encodeRequest(), function(data) {
        var responseDataFeed = data.responseData.feed;
        ...
        self.entries = responseDataFeed.entries;
        self.display(selector);
    });
};


编辑：

如果你不想display()进入回调，你可以尝试这样的事情（未经测试！）：

var RSSFeed = function(feedTitle, feedUrl, options) {
    ...
    this.loading = false;
    this.selector = null;

    this.sendFeedRequest = function() {
        var self = this;
        self.loading = true;
        $.getJSON(this.encodeRequest(), function(data) {
            ...
            self.loading = false;
            if (self.selector != null) {
                self.display(self.selector);
            }
        });
    };

    this.display = function(jQuerySelector) {
        var self = this;
        if (self.loading) {
            self.selector = jQuerySelector;
        }
        else {
            ...
        }
    };
};
于 2012-07-31T18:02:36.933 回答