Backbone JS滚动事件处理

Question

我正在尝试使用 JQuery 和下划线在 backbone JS 中实现滚动事件。在初始化函数中，我添加以下行：

 _.bindAll(this, 'filter_list');
 $(window).scroll(this.filter_list);

其中 filter_list 是我尝试从数据库中获取下一个 50 个条目的数据的函数。

页面第一次显示数据库中的100条记录。在滚动页面底部，调用 filter_list 函数，该函数具有从数据库中获取接下来的 50 个条目的逻辑。

当滚动条位于页面底部时，滚动事件会触发，但是滚动事件不会调用 filter_list 一次，而是会调用多次，最终会多次从数据库中获取相同的数据。添加相同的结果会更新到页面，即多次显示相同的 50 条记录。

我试过用不同的方式注册事件，但没有用。另外，如果有人能解释一下 backbone JS 中的滚动事件和绑定机制，那就太好了，我在互联网上没有得到任何好东西。

提前致谢

Answer 1

每次滚动条移动时都会触发scroll event，您需要自己完成所有的抓取逻辑。这是一个想法：

var MyView = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'filter_list');
    // also good idea to debounce
    this.filter_list = _.debounce(this.filter_list, 300);
    // Keep internal fetching state
    this.isFetching = false;
    $(window).scroll(this.filter_list);  
  },

  filter_list: function() {
    if (this.scrollHitPageBottom() && !this.isFetching) {
      this.isFetching = true;
      this.fetchDBEntries()
          .finally(function() { this.isFetching = false });
    }
  },

  ... 
})

Backbone JS滚动事件处理

Backbone JS scroll event handling

jquery

underscore.js

backbone-views

backbone-events