Ember路由器：如何使用transitionTo [英] Ember router: how to use transitionTo

问题描述

我有一个这样的链接

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);
  }
});

我可以这样做：

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;

但我想使用路由器。

我试过：

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

但是我收到这个错误：

未捕获错误：断言失败：找不到路线＃日历/ 2013/5

Uncaught Error: assertion failed: The route #calendar/2013/5 was not found

我也试过：

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

但这也给了我一个错误：

But this also gives me an error:

未捕获错误：断言失败：路线日历/ 2013/5未找到

Uncaught Error: assertion failed: The route calendar/2013/5 was not found

编辑：显示我的路由上面

displaying my routing above

推荐答案

与我在评论中说的相反，这实际上可以在不需要嵌套路由的情况下完成，使用 Route＃serialize 。

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() 
    }
});

定义路线

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

在日历路径中，我添加了 serialize 方法，将 obj 中的属性翻译到应用程序，然后我连接到 setupController 中的第三方lib获取天属性并设置其内容。

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);
    }
});

在Handlebars中，使用 {{linkTo}} helper，我将日历中的日历属性定义在 App 类中作为参数：

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}}

这将生成一个〜/＃/ calendar / 2013/4

这篇关于Ember路由器：如何使用transitionTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！