在Backbone.js视图中等待“无限滚动”结果

Wait for Infinite Scroll result in Backbone.js View

本文关键字：滚动无限无限滚动结果等待 Backbone js 视图更新时间：2023-09-26

我有一个InfiniteScrolls调用的问题，这是"Friends"中代码的一部分，例如：

var InfiniteScrollView = Backbone.View.extend({
    el : window,
    container : '#profile-friends',
    triggerHeight : 10, //px
    events : {
      'scroll' : 'throttledDetectBottomPage'
    },
    initialize : function() {
      this.throttledDetectBottomPage = _.throttle(this.detectBottomPage, 1000);
    },
    detectBottomPage : function() {
      var self = this;
      var offset = $(this.container).height() - this.$el.height() - this.triggerHeight;
      if (this.$el.scrollTop() >= offset) {
        self.nextPage();
      }
    },
    stop : function() {
      this.$el.unbind('scroll');
    },
    nextPage : function() {
      if (this.collection.activeScroll == true) {
        this.collection.nextPage();
        if (!this.collection.isPaginated) {
          if (this.collection.length == 0) {
            this.renderNotFoundPage();
            this.stop();
            return false;
          }
        } else {
          if (this.collection.length == 0) {
            this.renderNotFoundMoreResults();
            this.stop();
            return false;
          }
        }
      }
    },
    renderNotFoundMoreResults : function() {
      $('#profile-friends').append('No more results');
    },
    renderNotFoundPage : function() {
      var container = $(this.container);
      container.html('0 results');
    }
  });

在这个.collection.nextPage（）中，它被称为"api/friends/pag"，pag=页码。这里的代码收集：

// profile friends collection
define(
    ['underscore', 
     'backbone', 
     'models/user'],
    function(_, Backbone, User){
    var PFriendsCollection = Backbone.Collection.extend({
        // Reference to this collection's model.
        model: User,
        initialize: function(){
          this.isPaginated = false;
          this.active = false;
        },
        //Call in render
        search: function() {
          this.page = 1;
          this.isPaginated = false;
          this.active = true;
          this.fetch();
        },
        //Call in Infinite Scroll view NextPage
        nextPage: function() {
          if(this.active) {
            this.isPaginated = true;
            this.page = parseInt(this.page) + 1;
            this.fetch({update: true});
          }
        },
        // Url, points to the server API
        url: function() {
          return  'api/pfriends/' + this.page;
        },
        // Url, points to the server API
        // ATM it is just a json test file
        parse: function(response){
        // extract items from response. 
        return response.items;
        }
    });
    return new PFriendsCollection;
  });

我在FriendsView的render（）函数中创建了这个视图，向下我发现了一个问题：我走到底并触发启动，但他启动了很多次，如果我移动滚动，他会在同一时刻调用api/pfriends/2、api/pfrieds/3、api/friends/4（例如，调用次数是随机的），因为他不会哀号第一个响应并启动触发器：（

每当有挂起的获取响应时，我不知道将触发器、结果或阻止滚动触发器执行的东西放在哪里。

感谢=）

fetch返回一个延迟的jQuery，因此您可以在集合的下一页尝试此操作：

return this.fetch({update: true});

那么在你看来：

nextPage : function() {
      if (this.collection.activeScroll == true && !this.updating) {
        var self = this;
        this.updating = true;
        // function passed to 'always' is called whether the fetch succeeded or failed
        this.collection.nextPage().always(function(){
            self.updating = false;
            if (!self.collection.isPaginated) {
              if (self.collection.length == 0) {
                self.renderNotFoundPage();
                self.stop();
                return false;
              }
            } else {
              if (self.collection.length == 0) {
                self.renderNotFoundMoreResults();
                self.stop();
                return false;
              }
            }
          }
       }
    },

您可能希望实际使用done和fail，而不是always。查看文档以了解更多信息。