Ember router: how to use transitionTo

ember-router, ember.js

Solution

Oposite from what I said in the comments, this can actually be done without the need of nested routes, using the `Route#serialize`.

I've made this fiddle (demo here) with a scenario similar to what you described:

In the application, I'm storing the month and year arguments

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

Defined the routes

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

In the calendar route, I've added the `serialize` method, to translate the properties in `obj` to the app, then I connected with 3rd party lib in `setupController` to get the `days` property and set its content.

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 a `{{linkTo}}` helper, I am passing the `calendar` property defined in my `App` class as the argument:

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

This will generate a link to `~/#/calendar/2013/4`

Problem

I have a link that looks like this ``` index.html#/calendar/year/month ``` This is 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 get to it 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'd like to use the router instead. I tried: ``` var router = this.get('target'); router.transitionTo('#calendar/'+year + '/' + nextMonth); ``` But I get this error: Uncaught Error: assertion failed: The route #calendar/2013/5 was not found I also tried: ``` var router = this.get('target'); router.transitionTo('calendar/'+year + '/' + nextMonth); ``` But this also gives me an error: Uncaught Error: assertion failed: The route calendar/2013/5 was not found Edit: displaying my routing above

Original source