BackboneJS：将更多项目加载到集合中

发布于 2024-12-09 13:51:21 字数 296 浏览 0 评论 0原文

在 Backbone JS 中，当我获取集合时，我应该获取整个集合还是其中的一小部分？

例如，我在 mongoDB 中收集了新闻提要，其中可能有数千个项目。当用户点击页面时，我只想向他们展示最新的 10 项，并可以选择“加载更多”。但是，如果他们通过 URL http://site.com/#/feed/:itemID 访问特定项目，我希望能够提取该项目的记录。

1.我最初应该获取多少文档？

2.我如何通过 id 获取任何项目？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自找没趣 2024-12-16 13:51:21

在对我的集合调用 fetch 时，我最终使用了 {add: true} 语句。这可以防止集合被获取的结果替换，而是将结果附加到集合中。然后，我还使用 {data: {skip: amountOfItemsInCollectionAlready } 传递“跳过”金额，这在服务器端用于从数据库获取正确批次的项目。

我的最终获取方法如下所示：

    loadMore: function(e){

        this.collection.fetch({
            add: true,// this adds to collection instead of replacing
            data:{// this is optional params to be sent with request
                skip: this.collection.length// skip the number of items already in the collection
            }
        });
    }

I ended up using the {add: true} statement when calling fetch on my collection. This prevents the collection from being replaced by the result of the fetch and but instead appends the result to the collection. I then also passed the 'skip' amount using the {data: {skip: amountOfItemsInCollectionAlready }, this is used on the server-side to get the correct batch of items from the database.

My final fetch method looks like this:

    loadMore: function(e){

        this.collection.fetch({
            add: true,// this adds to collection instead of replacing
            data:{// this is optional params to be sent with request
                skip: this.collection.length// skip the number of items already in the collection
            }
        });
    }

回复收藏 0 原文

别低头，皇冠会掉 2024-12-16 13:51:21

您可能不想只使用Collection.fetch()，因为您不会获得客户端缓存的好处 - 它会删除您已经从服务器加载的项目并重置集合。您可能需要使用自定义函数扩展 Backbone.Collection 来检索更多项目。我在最近的项目中使用了以下代码：

Backbone.Collection.extend({

    // fetch list without overwriting existing objects (copied from fetch())
    fetchNew: function(options) {
        options = options || {};
        var collection = this,
            success = options.success;
        options.success = function(resp, status, xhr) {
            _(collection.parse(resp, xhr)).each(function(item) {
                if (!collection.get(item.id)) {
                    collection.add(item, {silent:true});
                }
            });
            if (!options.silent) collection.trigger('reset', collection, options);
            if (success) success(collection, resp);
        };
        return (this.sync || Backbone.sync).call(this, 'read', this, options);
    }

});

这主要是从默认的 fetch() 代码复制的，但它不会删除现有项目，而是添加新项目。您可能想在服务器端实现一些东西，使用 options 对象，因为 Julien 建议传入您想要加载的项目的参数，可能是一个页面数字（如果您想在服务器上控制页面大小）或起止对（如果您想在客户端上控制它）。

You probably don't want to just use Collection.fetch(), because you won't get the benefit of client-side caching - it'll drop the items you've already loaded from the server and reset the collection. You will probably need to extend Backbone.Collection with a custom function to retrieve more items. I used the following code in a recent project:

Backbone.Collection.extend({

    // fetch list without overwriting existing objects (copied from fetch())
    fetchNew: function(options) {
        options = options || {};
        var collection = this,
            success = options.success;
        options.success = function(resp, status, xhr) {
            _(collection.parse(resp, xhr)).each(function(item) {
                if (!collection.get(item.id)) {
                    collection.add(item, {silent:true});
                }
            });
            if (!options.silent) collection.trigger('reset', collection, options);
            if (success) success(collection, resp);
        };
        return (this.sync || Backbone.sync).call(this, 'read', this, options);
    }

});

This is mostly copied from the default fetch() code, but instead of dropping existing items it will add new ones. You'd probably want to implement something server-side, using the options object as Julien suggests to pass in the parameters of what items you want to load, probably either a page number (if you want to control page size on the server) or a start-stop pair (if you want to control it on the client).

回复收藏 0 原文