As I mentioned previously, a lot of Javascript frameworks implement the observer design pattern on their data models. That post was sparked by a conversation with Artur Adib on his lightweight Javascript MVC framework Agility JS. Not long ago, he mentioned to me that he’s had many requests for the ability to bind multiple views on one model. This reminded me how complex cascades of events can be implemented easily with a well designed Javascript framework. Here’s one use case in Planbox (we use Backbone JS).
On the Work page we show the list of items on the left. On the right is the Dashboard. It contains various tiles with summary information.
So each item is a Backbone Model; a Javascript object with key-value attributes which can be set or get. Backbone models implement the observer pattern. So anyone can bind on a change event of one or all attributes.
We use Backbone Views to render models. These views bind on their respective model’s change event. So if the name of an item is changed in the model, its view gets a call and updates its elements in the DOM.
We’ve gone a step further and created a Backbone Model called summary. This model binds on item model changes and calculates summary information such as item count, estimate-hour sum, etc… What we get is a cascade of events which looks like this:
Whenever an item model changes, the summary model gets updated. That in turn triggers a change event which is captured by the Dashboard views. They then render their DOM elements. Pretty cool!
This is a simplified view of what happens in Planbox. In reality, the summary model depends on many other models – not just items. It also binds on change events for user models and the project model itself. When a user is added, or removed, it recalculates its summary attributes which triggers a refresh of the Dashboard views.
If your application has something similar, I’d like to hear about it. And what JS framework do you use?
Martin,
nice article – we are experimenting with Backbone right now with node and mongodb. I think Backbone is a better way to handle a dynamic site over a server side MVC. Which db are you using ? How are you handling auth with Backbone ?
Hi John,
The back-end is your traditional PHP/MySQL. I have an API which spits out JSON. Backbone ingests that. For updates from client to server, I perform POSTs using jQuery’s ajax function (it will translate JSON to POST fields).
We still use basic auth and store a cookie on the client.
Bottom line is you can still use old proven stuff on the back-end, and use leading edge Backbone JS on the front-end. As long as they talk the same language (JSON).
This being said, I would love to use Node and MongoDB instead. But we can’t justify the change right now:(
I’ve got to hand it to you, you did a great job of explaining MVC Framework Cascading events… which is not an easy feat. Really liked the post!
Good job Martin.