JavaScript state to function sequence handling (mvc, dependent functions)

I have an "interactive chart application" written in JavaScript.

The state, among other properties, contains a "current" array:

state = {
    current: ["USA", "Norway", "Japan"],
    [...]
}

When adding a country to this list (or changing the state in general), a sequence of functions should trigger - for example:

function add(country){
     state.current.push(country);
}

=> updateYmax() then updateScales() then render()

In this case, the render() depends on updateScales(), which in turn depends on updateYmax().

What is best practices - in JavaScript - to keep the above simple? Can you give an example of using Backbone.js or other MVC architecture to simplify t开发者_如何学Pythonhe state handling and invocation of functions in the right order?

Thanks.

Have your country list be a Backbone.Collection and listen to events from it (add, remove, refresh usually). Chain your events up to the render call as alexanderb explained.

You can utilize backbone.js event for that. As soon as state change, you trigger "StateChanged" event. Different subscribers use that and does it portion of logic (update, render etc.)

http://documentcloud.github.com/backbone/#Events-bind