0

Google の Feed API を使用して RSS フィード データを取り込む作業用の jQuery プラグインを作成しています。この API を使用して、関連するすべての RSS フィード データをオブジェクトに保存し、それをメソッドで操作しています。RSSフィードをWebページにレンダリングする機能があります。残念ながら、個々の 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()機能はまだ完全ではありませんが、良い例として役立ちます。1 つ目は、配列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 に答える