Question

列表视图

 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个记录时？

Answer 1

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

接下来，您需要跟踪收藏所在的页面，然后根据每次要加载更多模型的情况，增加收藏页码并进行提取传递页面参数。

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

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


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

 }

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

在您的具体情况下，您似乎并未实际使用主干的提取来提出请求，但原则仍然相同。

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

backbonejs延迟加载集合

1 个答案: