Code Snippets

Using Routes to Navigate in Sproutcore

Usually, navigating to other panels would consist of getting the current panel, removing it, then appending the new panel. Routes will allow you to encapsulate this process and make it flexible for use throughout a project. Refer to this blog post for more information.

First, we will create a new object for the routing logic:

MyApp.routes = SC.Object.create({ //keep track of the current page currentPagePane: null, gotoRoute: function(routeParams) { var pageName = routeParams.pageName; if (pageName == undefined || pageName == '') { pageName = 'loginPage'; } var paneName = routeParams.paneName; if (paneName == undefined || paneName == '') { paneName = 'loginPane'; } if (this.currentPagePane != null) { this.currentPagePane.remove(); } var pagePanePath = pageName + '.' + paneName; var pagePane = MyApp.getPath(pagePanePath); pagePane.append(); this.currentPagePane = pagePane; } });

Next we need to initialize this route in the main.js file.

SC.routes.add(':pageName/:paneName', MyApp.routes, 'gotoRoute');

To navigate to another page, we simply call:

SC.routes.set('location', 'loginPage/loginPane');
Resource Tags: