Question

How would you implement this app in JavaScript using principles of MVC?

As you can see, the app basically has 3 views: “Sidebar”, “Visualization” & “Timeslider”. The underlying model must keep track of selected countries and year.

When initing the app, it should load a json file that populates the model with data. With some sort of event system (please advice), the controller should be notified of a stable model, and corresponding views should be set.

For example, adding a country in the sidebar should trigger data reload, followed by updating of x/y scales of the visualization view to accomodate for more countries etc.

How would you separate the logic from the views (what would go in the model, view & controller respectively) and what libraries would you use? (especially re. event handling).

Code is much appreciated … Thanks.

Answer 1

For this kind of application I suggest you to look into backbone.js.

Which basically is:

Backbone supplies structure to
JavaScript-heavy applications by
providing models with key-value
binding and custom events, collections
with a rich API of enumerable
functions, views with declarative
event handling, and connects it all to
your existing application over a
RESTful JSON interface.

You can take a look at Views on the backbone.js documentation; they have a huge amount of examples for you available, which will be more helpful than me providing a complete solution using backbone.js. They also have several demos with fully built apps ready fo you to base off.

Update: Also take a look into spine.js which is really similar to backbone but it’s not the same, from their F.A.Q the difference is:

Whoah – your API looks really similar to Backbone. Why should I use this Instead?

Well, it’s true that Spine
was inspired by Backbone, an excellent
library, and its controller API is
very similar. However, the
similarities end there. Internally the
library works very differently. For
example, Spine has no need for
Collections, which are required for
pretty much every model in Backbone.
Spine provides a class library, and
has very different ideas when it comes
to server sync. Lastly, Spine is much
simpler and half the size, go and
check out the source.