The backbone application that I am currently working on has a document section and a sidebar section.
To represent the brlow structure in Backbone, I came up with following views.
ApplicationView- the container for the sub views.
DocumentView- represents a current document being edited/displayed.
SidebarView- shows relevant information for the document that is there in the DocumentView.
My top level
ApplicationView is holding references to both child views -
SidebarView. The view hierarchy is:
Now, when there is some user intraction happening in one of the child views, I need to communicate that event to the other child view. Since the child views do not know about each other (in other words, they don’t hold references to each other, unlike the Parent view which holds references to all of its child views), I need to rely on some eventing mechanism.
After googling & reading other people opinions, following are the three different approaches that I considered in order achieve this.
1. Using the parent view as an Event relay
In the first approach, I used the parent
ApplicationView to relay the events between its child views. Since the parent view has reference to all its child views, its easy to relay the event through the parent.
But, this approach is not so effective in real. Because I had to introduce an additional event handler method
documentEdited() in the
ApplicationView just to pass around the events. When there are several events that I need to pass, then it will become a nightmare to add event handlers for all those events in the parent view.
So, I looked at the second approach.
2. Using an EventBus to communicate between views
In this approach, I extended the
Backbone.Events object and created an
EventBus object. Then I injected this
EventBus to all child views which then used to propogate events.
In this approach, I am using the
EventBus object like a global event registry. If I want to views to talk between each other, I just inject the common
EventBus in both of them and then trigger events/listen to events using te
Note: If you do not want a global event registry, you can still create module / view level event buses and share them across child modules/views.
This approach is much better than the first approach. But we have to manually inject the
EventBus to each child views. So, there’s some room for improvement in here. Hence, the third approach.
3. Using Backbone as the event bus
In the second approach, I created a seperate event bus object, extending
Backbone.Events. But later, I learned that
Backbone object itself is mixed with
Events. So, if I use
Backbone to propogate events, I can avoid creating one more event bus.
As an added advantage, I don’t need to manually inject
Backbone into each and every sub view since it is already available.
For now, I’m using the third approach, which uses the Backbone object as an event bus, in my project. IMO, this approach is somewhat cleaner than the other two (It still relies on Global
Backbone object though, but it’s okay in my case).
So, what approach would you use in your project? Feel free to share if you are following any better approaches than these to communicate between backbone views.