Dependency injection in JavaScript? (For data-driven visualization)

Question

These are some of the classes in my JavaScript application:

myApp.mode.model          Handles the state
myApp.mode.controller     Instantiates and updates components based on the model
myApp.data.dataManager    Does operations on the dataSource
myApp.data.dataSource     A big singleton with structured data
myApp.chart.grid          A grid component
myApp.chart.scatter       A scatter gram renderer
myApp.chart.tooltip       A tooltip renderer

The interaction between these components are sketched below: (Sorry for the bad illus. skills ... ;) )

What I'm looking for is a clean way to pass the necessary arguments (dependency management) to the sub-components of the Visualization controller:

Let's say the user changes an indicator in the Visualization display. The model asks the data manager to load the necessary data.

When the data is loaded, the Visualization controller learns about the model change and should update its respective components: Grid, Scatter, Tooltips etc.

The Grid needs to know things such as xMin, xMax, width, height ...
The "Scatter renderer" also needs xMin, xMax, width, height. In addition it needs access to the big data singleton and it needs to find out what parts of the data to draw.

Three questions:

1. How do I pass the dataSource to the Scatter renderer? Do I declare it or pass it?

2. Many components are interested in the available data to draw. The data manager could answer this query. Should the "dataAvailability" be passed to the Scatter renderer or should it instead have the whole data manager as a dependency?

3. Looking at the schematic drawing, how would you lay out the objects so that a new state (new indicators, year, selection, width, height) would easily propagate down through all the sub-objects?

Thanks :)

Answer 1

You might want to look at AngularJS as it has DI capabilities (to support easier testing).