私はこれが古いスレッドであり、おそらく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 と等しい場合、次のプロパティはこれらの値を持つ」という意味であると考えてください。次のボタンのテキストは「レビュー」で、前のボタンは非表示にする必要があります。」
そして最後に、リソース テンプレート:
<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>
form-wizard コンポーネントが何であったかについては、jsbin を確認できます (ルートに基づいて正しいステップでアクティブなクラスを維持する、Fuelux ウィザードの css をラップするだけです)。ウィザードの本文は、各サブルートのテンプレートです。次/前のボタンのテキストは、ルートに応じて変化し、トランジションも変化します (トランジションはウィザードの現在の状態に依存するため)。それは多かれ少なかれFSMです