Question

I have a JavaScript web application which, when being initialized, takes a chartType parameter. The chartType value (for example “populationPyramid” or “scatterGram”) should determine the layout state of the app. In “populationPyramid mode”, the app should for example have a small sidebar view and an extra heading view. (All in all there might be 4 different layouts of the app with their own css settings.)

Let’s say the populationPyramid has a model, a controller and a number of views that each should have its own div container.

1) How do I easily inject the necessary html when initing the application or when changing state? Can JavaScript templates help me?

2) And how do I handle window.resize events on a per view basis?
thanks.

Answer 1

Try a clientside MVC framework such as backbone or spine.

You can use a hashbang url routing system to change your “page” or “layout” for each chart.

You can use templates/views to render your page/layout and you can use models in JavaScript to hold all your state.

1. When you initialize the application you simply grab some data through your ajax connection, store it in your model and then render it through your view. When your router detects a hashbang url page change you get some different data through ajax and render that instead.

2. Your deconstructors on your model/views should remove events. So whenever you create a new client side view you rebind specific events for that view.