0

我遇到了 InfiniteScrolls 调用的问题，这是“朋友”中代码的一部分，例如：

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');
    }
  });

在 this.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/ pfriends/3, api/friends/4 （例如，是随机的调用次数）在同一时刻，因为他不哀号第一个响应和启动触发器:(

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

谢谢 =)

4

1 回答 1

0

fetch返回延迟的 jQuery，因此您可以在集合的 nextPage 中尝试此操作：

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;
              }
            }
          }
       }
    },

您可能想要实际使用doneandfail而不是always. 查看文档以获取更多信息。

于 2013-02-11T17:05:12.467 回答