2

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

enter image description here

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.

Improve this question
2
  • Knockout promotes MVVM. Check their video Commented May 20, 2011 at 13:21
  • 2
    I'm going +1 for the sweet image. Commented May 20, 2011 at 13:28

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Or spine! Which is like backbone but not backbone!
I've looked into Backbone but it seems to provide more overhead than necessary for this kind of app. "Routes" for example does not provide much benefits when trying to keep track of a state with let's say 30 variables - or am I missing something? Rather I'd like some input on rolling my own basic MVC using just a simple event system and a clear division into model, view/s and controller. If you still think Backbone is the way to go, please provide some sample code for the project above and I'll mark the question as answered :) thanks
@dani backbone / spine are about as minimal as it gets. There's no point in re-inventing the wheel, you don't need to use all of it.
@Raynos Point taken! I'll have a look at Spine as well :) It's primarily the event binding and model => hash state serialization I don't want to re-invent myself. I suppose the inheritance/class systems implemented in the aforementioned frameworks are also quite thought-through?
@Raynso +1. Reinventing the wheel is not the solution for this case.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.