3

JSONフィードから無限/無限のスクロールデータをレンダリングしたいと思います。Backbone / Underscore/jQueryを使用してPinterestやGoogleリーダーに似たものを実現することに興味があります。

infiniScroll.jsモジュールをバックボーンビューに適用するにはどうすればよいですか？目標は、ページの終わり近くをスクロールしたときに、次のページ（「ページ」URLパラメーター）のツイートをフェッチして追加することです。問題：ページの下部に到達すると、同じJSONページフィードがフェッチされます。pageURLのパラメータを変更する方法&page=2など。

デモ： http ：//dl.dropbox.com/u/19974044/test.htmlまたはhttp://jsfiddle.net/k4rPP/3/

// Define the model
Tweet = Backbone.Model.extend();

// Define the collection
Tweets = Backbone.Collection.extend({
    model: Tweet,
    // Url to request when fetch() is called
    url: 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&trim_user=false&count=10&screen_name=cnn&page=1&callback=?',
    parse: function (response) {
        return response;
    },
    // Overwrite the sync method to pass over the Same Origin Policy
    sync: function (method, model, options) {
        var that = this;
        var params = _.extend({
            type: 'GET',
            dataType: 'jsonp',
            url: that.url,
            processData: false
        }, options);

        return $.ajax(params);
    }
});

// Define the View
TweetsView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
        // create a collection
        this.collection = new Tweets;
        // Fetch the collection and call render() method
        var that = this;
        this.collection.fetch({
            success: function () {
                that.render();
            }
        });
        // infiniScroll.js integration
        this.infiniScroll = new Backbone.InfiniScroll(this.collection, {success: this.appendRender, param:'page', includePage:true});
    },
    // Use an extern template
    template: _.template($('#tweetsTemplate').html()),

    render: function () {
        // Fill the html with the template and the collection
        $(this.el).html(this.template({
            tweets: this.collection.toJSON()
        }));
    }
});

var app = new TweetsView({
    // define the el where the view will render
    el: $('body')
});​
4

1 に答える 1

1

url属性は、文字列ではなく関数として指定できます。したがって、次のようなものに置き換えることができます。

...
currentPage: 0,
url: function() {
  this.currentPage++;
  return 'https://path.to.url/?page=' + this.currentPage;
},
...
于 2012-10-03T05:36:33.863 に答える