4

我试图在 Backbone.Marionette.CompositeView 中捕获滚动事件，但没有成功。

作为练习，我正在使用 Backbone.Marionette重写http://www.atinux.fr/backbone-books/ 。如您所见，当您向下滚动时，会获取并显示更多书籍（即无限滚动）。但是，我无法在我的视图中捕获滚动事件。

这是我的（简化的）代码：

  LibraryView = Backbone.Marionette.CompositeView.extend({
    // properties, initializer, etc.

    events: {
      'scroll': 'loadMoreBooks',
      'click': 'loadMoreBooks'
    },

    // some functions

    loadMoreBooks: function(){
      console.log("loadMoreBooks");
    }
  });

完整的源代码可以在这里看到：https ://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

我不明白的是“点击”事件被正确触发，但“滚动”事件没有。我究竟做错了什么？

编辑：所以错误最终非常简单......我将“el：#content”传递给视图的构造函数，但滚动是在“.library”上的CSS中定义的。所以一旦我改变了我的DOM

<div id="content">
  <div class="library">
  </div>
</div>

到

<div id="content" class="library"></div>

一切正常...

4

3 回答 3

16

Backbone 附加到顶部的el元素以查找所有事件。一些 DOM 事件不会冒泡到父元素，这包括滚动。点击事件有效，因为它确实冒泡。

参考：http ://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll

于 2012-11-27T13:01:37.267 回答
8

这段代码对我有用：

var View = Backbone.View.extend({
  events: { "scroll": "scroll" },
  scroll: function(){ console.log( "scrolling..." ); }
});

检查 jsFiddle

正如@JoshLeitzel 所说，我认为问题在于它本身的DOM 元素。

尝试绕过 Backbone：

$("#content").bind( "scroll", function(){ console.log( "scrolling from jquery directly" ); } );

也尝试更换：

el: $('#content')

经过

el: '#content'

我认为这不是问题，而是新的el定义风格:)

于 2012-04-23T09:44:30.853 回答
4

我不知道你el是什么，但我怀疑这是没有收到scroll事件的东西。由于 Backbone 将事件处理委托给 jQuery，请查看 jQuery 对scroll事件的说明：

当用户滚动到元素中的不同位置时，该scroll事件被发送到元素。它适用于window对象，也适用于overflowCSS 属性设置为滚动的可滚动框架和元素（或者auto当元素的显式高度或宽度小于其内容的高度或宽度时）。

除非您el满足这些条件，否则它将不会收到该scroll事件。您必须将事件处理程序放在window或其他接收它的元素上。

于 2012-04-21T17:39:40.777 回答