Capture scroll event on div

backbone.js backbone-events marionette
David Sulc picture David Sulc · Apr 21, 2012 · Viewed 14.2k times · Source

I'm trying to capture the scroll event within a Backbone.Marionette.CompositeView, but without success.

As an exercise, I'm rewriting http://www.atinux.fr/backbone-books/ using Backbone.Marionette. As you can see, when you scroll down, more books are fetched and displayed (i.e. infinite scroll). However, I'm unable to capture the scroll event on my view.

Here's my (simplified) code:

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

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

    // some functions

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

The full source code can be seen here: https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

What I don't understand is that the "click" event is being triggered properly, but the "scroll" event isn't. What am I doing wrong?

Edit: so the error was pretty simple in the end... I was passing "el: #content" to the view's contructor, but the scroll was defined in CSS on ".library". So once I changed my DOM from

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

to

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

everything worked properly...

Answer

Chris Smith picture Chris Smith · Nov 27, 2012

Backbone attaches to the top el element to look for all events. Some DOM events are not bubbled to parent elements and this includes scroll. The click event worked because it does bubble.

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

Related questions

Backbone View: Inherit and extend events from parent

Backbone's documentation states: The events property may also be defined as a function that returns an events hash, to make it easier to programmatically define your events, as well as inherit them from parent views. How do you inherit a …

Read More
Backbone.js - using trigger to trigger event and pass data

I'm writing a tab menu component using backbone.js as an MVC framework. When a user clicks on a tab, the component will switch tabs (internal operation), but then I would like listeners of the component to respond to the …

Read More
Backbone model.destroy(): Is explicit removal from collection necessary?

I have a simple question. I am looking at a function with 2 lines of code: deleteTask: function() { this.parent.collection.remove(this.model); this.model.destroy(); } If I comment out the first line, which is supposed to remove the model …

Read More