骨干js延迟加载收集答案

【问题标题】：backbonejs lazy load collection骨干js延迟加载收集
【发布时间】：2023-03-05 19:26:01
【问题描述】：

列表视图

 define(['jquery', 'underscore', 'backbone', 'text!views/abcView/abcListView.html','views/abcView/ListTemplate' ,'app/utils', 'collection/abcListCollection'], function($, _, Backbone, tmpl_abcummaryView, abcListView, Utils, abcListCollection) {

var abcListView = Backbone.View.extend({
    // Setting the view's template property using the Underscore template method        
    template: _.template(tmpl_abcummaryView),
    // View constructor
    initialize: function() {            
        mainRouter.collections.abc = new abcListCollection();            
    },
    // View Event Handlers
    events: {

    },
    // Renders the view's template to the UI
    render: function() {
        var self=this;
        this.$el.html(this.template({data: this.templateData}));            
        mainRouter.collections.abc.fetchData({
                success: function (collection, response) {
                    _.each(collection, function (obj) {  
                        html = new abcListView({model: obj}).render();
                        self.$el.find('#abcList').append(html);                            
                    })
                },
                error: function (err) {
                    console.log("error");
                }
        });
        // Maintains chainability
        return this;
    }
});
return abcListView;
 });

 define(['underscore', 'backbone', 'models/abcModel', 'app/utils'], function(_, Backbone, abcModel, Utils) {

var self;
//List of Alerts stored in Backbone Collection
abcListCollection = Backbone.Collection.extend({
    model: abcSummaryModel,
    initialize: function() {           
        self = this;
        _.bindAll(this, 'fetchData');
    },

   fetchData: function(obj) {           
        add=true;
        var data = {
            "method": "method name",
            "params": {
                param1:"param1",
                param2:"param2"
            }
        }

        Utils.Ajax.post(Utils.WebAPI.WebAPIServer, data, function(response, textStatus, jqXHR) {                                
            obj.success.call(self.collection, response);
        }, 'json', function(err) {
            console.log(JSON.stringify(err));
            obj.error.call(err);
        }, "loading");

    },
    collection: {}
});
return abcListCollection;
});

如何延迟加载集合，即最初显示 5 个项目，当用户滚动屏幕时获取下 5 个记录？

【问题讨论】：

对于初始数据，您可以将这些项目提升到您的集合中，然后当您在 page parameter 中执行获取传递时。
你能给我举个例子吗？
我应该可以做到。您似乎没有使用骨干网的 fetch 来获取您的集合数据，对吗？
是的，我没有使用骨干网的提取，因为我想将数据发布到服务器，然后响应将可用。而且我不知道是否可以使用 fetch 将数据发布到服务器？
一般来说，你可以覆盖主干的同步方法来发出你想要的请求，但更具体地说，只是设置emulateHttp 可能会做你想做的事。那就是说你明白我的回答了吗？

标签： backbone.js lazy-loading backbone.js-collections

【解决方案1】：

在做任何其他事情之前，您的 Web 服务需要有一种基于传递的参数返回项目子集的方法。为简单起见，我们将其称为页码例如，假设您的 Web 服务采用 page 参数，该参数将根据页码返回 5 个项目（因此第 1 页返回第 1-5 个项目，第 2 页6-10 等）。

接下来，您需要跟踪您的集合所在的页面，然后基于此，每次您想要加载更多模型时，您都会增加集合页码并通过页面进行获取参数。

例如，每次您想获取更多模型时：

var MyCollectionView = Backbone.View.extend({
    //...
    pageNumber:0,


    fetchNewItems: function () {
      this.pageNumber++;
      this.collection.fetch({data: {pageNumber: this.pageNumber}});
    }

 }

至于在用户滚动时加载项目，您需要绑定到窗口的滚动事件，然后相应地获取，您可以在您的集合视图中执行此操作，或者特别是如果您希望其他事情也基于在滚动上，您可以创建一个视图来监视窗口滚动位置并触发您的其他视图可以订阅的事件。

在您的具体情况下，看起来您实际上并没有使用骨干网的 fetch 来发出请求，但是原理保持不变。

还有几点，您可能只想在成功回调中增加 pageNumber，并且您可能希望在加载所有项目后设置一个标志，这样您就不会继续发出 fetch 请求或取消绑定您的滚动事件的事件处理程序（例如，一旦您从服务中取回一个空数组）。

【讨论】：