Using Routes to Navigate in Sproutcore

Code Snippet

SproutCore

November 7
blog author

vanessab

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 postfor 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');