Ember router: how to use the transition to

Question

I have a link that looks like

index.html#/calendar/year/month 

Here's how I set up my routes:

 App.Router.map(function() { this.resource('calendar', {path: 'calendar/:currentYear/:currentMonth'}); }); App.CalendarRoute = Ember.Route.extend({ model: function (params) { var obj = { weeks: calendar.getDaysInMonth(params.currentMonth, params.currentYear), currentMonth: params.currentMonth, currentYear: params.currentYear }; return obj; }, setUpController: function(controller, model) { controller.set('content', model); } }); 

I can do this by doing this:

 var currentMonth = this.get('content.currentMonth'); var nextMonth = parseInt(currentMonth)+1; var route = '#/calendar/' var year = this.get('content.currentYear'); window.location.href= route + year + '/' + nextMonth; 

But I would like to use a router.

I tried:

 var router = this.get('target'); router.transitionTo('#calendar/'+year + '/' + nextMonth); 

But I get this error:

Failed Error: approval failed: route # calendar / 2013/5 not found

I also tried:

 var router = this.get('target'); router.transitionTo('calendar/'+year + '/' + nextMonth); 

But this also gives me an error:

Fault Error: approval failed: route calendar / 2013/5 not found

Edit: display my routing above

Answer 1

Based on what I said in the comments, this can be done without the need for nested routes using Route#serialize .

I made this script ( here ) with a script similar to what you described:

In the application, I store the arguments of the month and year

 window.App = Ember.Application.create({ title: 'Cool App', calendar: { month: new Date().getMonth()+1, year: new Date().getFullYear() } }); 

Routes defined

 App.Router.map(function() { this.route("home"); this.resource('calendar', { path: 'calendar/:year/:month'}); }); 

In the calendar route, I added a serialize method to translate the properties in obj into the application, then I connected to the third party lib in setupController to get the days property and set its contents.

 App.CalendarRoute = Em.Route.extend({ activate: function() { $(document).attr('title','Events') }, serialize: function(obj) { return { year: obj.year, month: obj.month } }, setupController: function(controller, model) { var obj = { days: calendar.getDaysInMonth(model.month, model.year), year: model.year, month: model.month }; controller.set('content', obj); } }); 

In Handlebars, using the {{linkTo}} I pass the calendar property defined in my App class as an argument:

 {{#linkTo calendar App.calendar tagName="li"}} <a {{bindAttr href="view.href"}}> Calendar </a> {{/linkTo}} 

This will result in a link to ~/#/calendar/2013/4

Answer 2

A router is more than a URL manager. It manages the state for the entire application. To fully help you, it would be better to see more code. Have you created the routes? Are you just trying to go to a "url" that is not handled by the ember application?

this.transistionTo(routeName) expects to get a named route, as far as I know. Then it will generate the correct URL for this route. If you have not configured any routes, I do not think you can use it.