Ember router: how to use transitionTo

Question

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

Alexandrine

hmm, in router.transitionTo('#calendar/'+year + '/' + nextMonth); you're missing a "/" after the "#". i don't know what else might be wrong, but i usually use something like either this.transitionToRoute('example.name'); or App.Router.router.transitionTo('example.name');. – Juba

That sounds good, so I just tried: router.transitionTo('#/calendar/' + year + '/' + nextMonth); But then I get Uncaught Error: assertion failed: The route #/calendar/2013/5 was not found – Alexandrine

@Alexandrine I believe this problem is related to your definition of routes. This should probably be a nested route with a segment for year and another with a segment for month. Also, he way you're currently doing seems to be missing the params argument in your model method in that route. – Canine

@Canine can you provide a code sample of how to nest with my year and month segment? i.e. is it just like this.route('year', {path: ':currentYear', function() {// my other nested route... }}); ? – Alexandrine

@Alexandrine It would be something along these lines. I won't have the time to write it anytime soon, but I'd suggest that you read this and this. Focus on understanding the Router.map and the declaration of resource and route within it. I'll try to write something later today tho – Canine

@Alexandrine got you a code sample, see below – Canine

Answer 1

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

Canine

Thanks! This is actually a more complete explanation than in the actual documentation. Really helps. – Alexandrine

I feel your pain. The documentation has a few gaps, but I'm sure it will be better soon. If you feel like helping, you should visit the website repo. There's lots to be done :) – Canine

Answer 2

The router is for more than a url manager. It manages the state for the entire application. In order to fully help you it would be better to see more code. Have you created routes? Are you just trying to go to a 'url' that is not handled by the ember app?

this.transistionTo(routeName) expects to receive a named route as far a I know. It will then generate the correct url for that route. If you have not setup any routes then I don't think you are able to use it.

Minister

That gives me "Uncaught More objects were passed than dynamic segments " – Alexandrine

Sorry, looking at the route closer you should just pass the calendar object as it is only expecting one parameter and uses that to create the two parameters – Minister