3

我想从 JSON 提要中呈现无限/无尽的滚动数据。我有兴趣使用 Backbone/Underscore/jQuery 完成类似于 Pinterest 或 Google Reader 的事情。

如何将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 回答