我知道这是一个旧线程，可能对 OP 没有帮助，但是 stackoverflow 比其他任何东西都能提供更多的答案。我刚刚写了一篇关于此的博客文章。
看看这个JSBin看看我做了什么。我会在这里总结一下。
模板中的每一步路线：
Router.map(function() {
this.resource('wizard', function(){
this.route('index');
this.route('review');
this.route('complete');
});
});
路由更改时更改值的自定义计算属性（在这种情况下，当向导的步骤更改时）
import Ember from 'ember';
var get = Ember.get;
var computed = Ember.computed;
export function routeVal(routeVals, prop){
return computed('currentPath', function(){
var currentRoute = get(this, 'currentPath');
var routeValues = get(this, routeVals);
for (var i = 0; i < routeValues.length; i++) {
if (routeValues[i].route === currentRoute) {
return routeValues[i][prop];
}
}
});
}
一个route-value对象：
export default Ember.Object.extend({
route: null
//all other props can be added dynamically
});
用于了解当前路由的控制器 mixin：
export default Ember.Mixin.create({
needs: ['application'],
currentPath: Ember.computed.alias("controllers.application.currentPath")
});
资源控制器：
import CurrentRouteAware from 'path/to/mixin';
import {routeVal} from 'app_name/utils/macros';
export default Ember.Controller.extend(CurrentRouteAware, {
routeValues: [
RouteVal.create({
route: 'wizard.index',
step: 'Create',
next: 'Review',
nextTransition: 'wizard.review',
prevTransition: 'wizard.index',
showNext: true,
showPrev: false
}),
RouteVal.create({
route: 'wizard.review',
step: 'Review',
next: 'Complete',
prev: 'Create',
nextTransition: 'wizard.complete',
prevTransition: 'wizard.index',
showNext: true,
showPrev: true
}),
RouteVal.create({
route: 'wizard.complete',
step: 'Complete',
next: 'Make Another',
prev: 'Review',
nextTransition: 'wizard.complete',
prevTransition: 'wizard.review',
showNext: false,
showPrev: true
})
],
nextButton: routeVal('routeValues', 'next'),
prevButton: routeVal('routeValues', 'prev'),
nextTransition: routeVal('routeValues', 'nextTransition'),
showButtons: routeVal('routeValues', 'showButtons'),
prevTransition: routeVal('routeValues', 'prevTransition'),
showNext: routeVal('routeValues', 'showNext'),
showPrev: routeVal('routeValues', 'showPrev'),
actions: {
next: function(){
this.transitionToRoute(this.get('nextTransition'));
},
prev: function(){
this.transitionToRoute(this.get('prevTransition'));
}
}
});
将路由值对象视为“当路由等于 routeVal.route 时，以下属性将具有这些值”例如“当当前活动的路由是 'wizard.index' 时，下一个转换是 'wizard.review'，下一个按钮文本是“评论”，上一个按钮应该被隐藏，等等”
最后，您的资源模板：
<div class="wizard" id="wizardIllustration">
{{form-wizard steps=routeValues currentPath=currentPath}}
<div class="actions">
{{#if showPrev}}
<button type="button" {{action 'prev'}}class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>{{prevButton}}</button>
{{/if}}
{{#if showNext}}
<button {{action 'next'}}type="button" class="btn btn-default btn-next" >{{nextButton}}<span class="glyphicon glyphicon-arrow-right"></span></button>
{{/if}}
</div>
<div class="step-content">
{{outlet}}
</div>
</div>
您可以查看 jsbin 以了解 form-wizard 组件是什么（只是对 Fuelux 向导的 css 的包装，它使活动类根据路线保持在正确的步骤上）。向导的主体是每个子路由的模板。下一个/上一个按钮的文本会根据路线而变化，它们的转换也是如此（因为转换取决于向导的当前状态）。它或多或少是一个 FSM