BackboneJs 集合和 Rest API 调用 [关闭]答案

【问题标题】：BackboneJs Collections and Rest API calls [closed]BackboneJs 集合和 Rest API 调用 [关闭]
【发布时间】：2016-02-12 19:10:24
【问题描述】：

我目前正在主干博客上工作 - 现在之前我创建的任何主干应用程序都相当小，所以我应该在应用程序初始化时获取我所有的集合，将其存储在集合中并将它们传递给我对使用的看法。

我面临处理潜在的大量数据（博客文章）。我不相信在一次调用中加载所有数据是最好的主意。我想做的是创建分页，它最初会请求 9 条记录，其中包含帖子计数和当前页面计数，然后对于每个页面，我们都会对下一组数据等发出新请求。

请记住，我也在构建 Rest API，因此我对响应的格式没有任何限制。

我非常希望仍然遵循骨干中的集合概念 - 这可能吗？

如果有人以前这样做过或有任何想法可以帮助我，那将不胜感激。

【问题讨论】：

标签： javascript php jquery backbone.js require

【解决方案1】：

你可以这样做：

var BlogPostsCollection = Backbone.Collection.extend({

    url: function() {
        return 'posts?page='+this.page;
    },

    fetch: function(options) {
        this.page = options && options.page || 0;

        return Backbone.Collection.prototype.fetch.apply(this, arguments);
    },

    parse: function(resp, options) {
        var models = resp;

        return _.map(models, function(model) {
            model.page = options.page;
            return model;
        });
    }

});

var BlogPostsView = Backbone.View.extend({

    syncedPages: [],

    events: {
        'click .page': 'onPageClick'
    },

    initialize: function() {
        this.filteredCollection = new Backbone.Collection();

        this.listenTo(this.collection, 'request', this.onCollectionRequest);
        this.listenTo(this.collection, 'sync', this.onCollectionSync);
        this.listenTo(this.filteredCollection, 'reset', this.onFilteredCollectionReset);

        this.requestingPage = 0;
        this.collection.fetch({
            page: this.requestingPage
        });

        this.render();
    },

    onPageClick: function(e) {
        e.preventDefault();

        this.requestingPage = +e.target.dataset.page;

        if (this.syncedPages.indexOf(this.requestingPage) < 0) {
            this.collection.fetch({
                page: this.requestingPage,
                remove: false // Important - merge the response models
            });
        } else {
            this.filterToPage(this.requestingPage);
        }
    },

    onCollectionRequest: function() {
        this.filteredCollection.reset();
        this.render();
    },

    onCollectionSync: function(collection, response, options) {
        if (options.page === this.requestingPage) {
            this.filterToPage(this.requestingPage);
        }

        this.syncedPages.push(options.page);
    },

    onFilteredCollectionReset: function() {
        this.render();
    },

    filterToPage: function(page) {
        this.currentPage = page;
        this.filteredCollection.reset(this.collection.where({ page: page }));
    },

    render: function() {
        if (!this.filteredCollection.length) {
            this.$el.html('<p>Loading...</p>')
        } else {
            this.$el.empty();
            this.filteredCollection.each(function(postModel) {
                this.$el.append('<p>'+postModel.get('title')+'</p>');
            }, this);
        }

        this.$el.append('<a href="#page0" class="page" data-page="0">Page 0</a> | <a href="#page1" class="page" data-page="1">Page 1</a>');
    }

});

var blogPostView = new BlogPostsView({
    el: $('#app'),
    collection: new BlogPostsCollection()
});

显然该视图用于演示目的 - 使用 html 字符串，逐个附加博客文章不是最佳的，应该有一个 BlogPostView 和一个 BlogNavigationView 等。

注意我添加了一些奖励逻辑：

页面被抓取后，不需要重新抓取（remove:false + syncedPages）
如果出现多个请求，它不会混淆显示哪个（由于 requestingPage 变量）。如果你点击第1页，然后回到第0页，它会立即再次显示第0页，但它会在后台缓存第1页。

演示：http://jsfiddle.net/ferahl/sfyqt7wr/

【讨论】：