Ember router: how to use transitionTo

问题:

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

回答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

回答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.