Ember 路由器:如何使用 transitionTo [英] 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);
}
});
我可以这样做:
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);
但我收到此错误:
未捕获的错误:断言失败:找不到路由#calendar/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
在上面显示我的路由
推荐答案
与我在评论中所说的相反,这实际上可以在不需要嵌套路由的情况下完成,使用 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
.
我制作了这个小提琴(demo here) 与您描述的场景类似:
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
获取 days
属性并设置其内容.
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}}
助手,我将在我的 App
类中定义的 calendar
属性作为参数传递:
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屋!