0

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

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

doneのfail代わりに実際に使用することをお勧めしますalways。詳細については、ドキュメントを確認してください。

于 2013-02-11T17:05:12.467 に答える