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:

How do I pass the dataSource to the Scatter renderer? Do I declare it or pass it?
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?
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?

enter image description here

Thanks :)

Are you using a particular JS framework or library? Some of them have features that help precisely with this kind of stuff. — hugomg
– hugomg, Commented Aug 28, 2011 at 23:15
Since it looks like you've already written quite a bit of code, this won't be an answer, but you might consider backbone.js for future JS MVC-type projects — Philip Schweiger
– Philip Schweiger, Commented Sep 14, 2011 at 20:02
I don't see a controller interacting with your model...unless this myApp.mode.controller is the Visualization controller — user656925
– user656925, Commented Aug 1, 2012 at 22:25

user23969 · Accepted Answer · 2011-09-02 10:37:02Z

3

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

answered Sep 2, 2011 at 10:37

user23969

1882 silver badges7 bronze badges

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

Comments

Misko Hevery · Accepted Answer · 2011-09-14 19:59:30Z

1

also check out https://github.com/briancavalier/wire for dependency injection

answered Sep 14, 2011 at 19:59

Misko Hevery

47.9k11 gold badges43 silver badges36 bronze badges

Comments

Infeligo · Accepted Answer · 2011-08-29 18:53:03Z

What you're talking about is more a question of MVC architecture. You don't have tens of instances of objects in different scopes to require a DI.

Looking at the diagram you drew, I have a strong feeling that in place of model there should be a controller. It's controller's duty to handle user's interactions. Your controller might look like this:

var Controller = {

    init: function {
        this.dataManager = ...;
        this.grid = ...; // grid is some sort of widget
        this.scatter = ...; // scatter is some sort of widget
        // Setup widgets
        this.scatter.x = 100;
        this.scatter.y = 100;
    },

    bind: function {
        // Bind to your indicator controls
        $('#indicator').change(_.bind(this.update, this)); // mind the scope
    },

    update: function () {
        var indicatorValue = $('#indicator').val();
        var data = this.dataManager.getData(indicatorValue);
        this.grid.setData(data);
        this.scatter.setData(data);
        this.scatter.setRegion(300, 300);
    }

}

Controller.init();
Controller.bind();

That's it. Pass ready data to Grid and Scatter, don't pass data source and data query parameters to them.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related