Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Proper procedure for using sproutcore-routing

Tags:

ember.js

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.

like image 497
Bob Spryn Avatar asked Dec 20 '11 05:12

Bob Spryn


3 Answers

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/

like image 72
ghempton Avatar answered Oct 26 '22 01:10

ghempton


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.

like image 37
Luke Melia Avatar answered Oct 25 '22 23:10

Luke Melia


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.

like image 26
Joachim H. Skeie Avatar answered Oct 26 '22 01:10

Joachim H. Skeie