Question

I have a Backbone view named Foo which has a scrollbar. When the scrollbar is moved in a certain direction I want to have other views in my application change in various ways. These views are not nested inside of Foo — they are completely separate and managed independently.

Should I pass references to all the other views into Foo’s constructor so that it can manually update them? Or should I use events to notify these other views of the scrollbar movement? If so, what object should the event be triggered on by Foo, and listened to by the other views?

These are purely visual changes and there is no model backing them.

Answer 1

i would use events in this case

take this example:

NavigationView = Backbone.View.extend({
  initialize: function(options){
    options.events.bind("navigation:change", this.changeNavigation);
    this.render();
  },

  changeNavigation: function(key){
    $('.menuItem', $(this.el)).removeClass("active");
    $('.menuItem', $(this.el)).filter("." + key).addClass("active");
  },

   render: function(){
     // rendering goes on here....

   }
});

UserListView = Backbone.View.extend({

  initialize: function(options){
    options.events.trigger("navigation:change", "users");
    this.render();
  },

  render: function() {
    // rendering goes on here....

  }
});

// kickstart the application

var myEvents = _.extend({}, Backbone.Events);

var myNavigation  = new NavigationView({events: myEvents});

// this is just a collection of users... i left it out as it is not really the point here...
var users = new UserList(); 

var myUserList = new UserListView({collection: users, events: myEvents});

should you need more info, on either referencing 1 view to another, or events, you can also take a good look at this article by Derick Bailey, he explains the above method as an eventAggregator and lists a documented example on how to work with it (and alternatives).
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/