Proper procedure for using sproutcore-routing

Question

Curious about the proper procedure, or at least common procedure for using sproutcore-routing.

In the read me there it shows this basic example for routing:

SC.routes.add(':controller/:action/:id', MyApp, MyApp.route);

I'm assuming that in most cases MyApp.route would call the supplied action on the supplied controller. My question is more about beyond this step how you handle the setup/teardown stuff for an application where you have lots of primary views.

Are people instantiating new controllers when the controller changes as to always start with a clean slate of data and views? Or is it more common/advisable to instantiate all the controllers and such at load and simply use the routing to show/hide primary views?

I suppose the same question goes when bouncing between actions within a controller. Is it proper to do some teardown, especially on bindings/listeners, and then re-establishing them if the action is recalled?

My question may be a little fuzzy, but I'm basically wondering how people handle lots of primary views, and deal with cleanup so stuff doesn't get stale or chew up lots of resources.

Answer 1

I wrote a blog post that describes a method for this: http://codebrief.com/2012/02/anatomy-of-a-complex-ember-js-app-part-i-states-and-routes/

Answer 2

In most Ember and Sproutcore apps and examples I have seen, controllers are instantiated at app initialization. Routes drives state changes in statecharts, where controllers are updated and views are created/destroyed as needed.

Answer 3

I have the following setup.

in my Ember.Application.create() I have the following code:

MyApp.routes = Em.Object.create({
        currentRoute: null,

        gotoRoute: function(routeParams) {
            console.log('MyApp.routes gotoRoute. type: ' + routeParams.type + ' action: ' + routeParams.action + " id: " + routeParams.id);
            if (routeParams.type === 'expectedType' && routeParams.action === 'expectedAction' && routeParams.id) {
                //find item with ID and load in controller
                MyApp.MyController.findItemWithId(routeParams.id);
                //Navigate to the correct state
                MyApp.stateManager.goToState('stateName');
            }
        }
    })

    SC.routes.add(":action/:type/:id", MyApp.routes, 'gotoRoute');

Then, when I click on things that should cause the URL to change I do:

    SC.routes.set("location", "show/item/ID-123-123");

Your app should now be listening to changes in the URL and cause the correct action to happen based on the URL-part.

You could probably move the MyApp.MyController.findItemWithId(routeParams.id); to the enter() function of the statechart (if you are using them), but you do need to store that ID somewhere in some controller.