私はこの古いスレッドを知っていて、おそらくOPを助けませんが、stackoverflowは何よりも多くの答えにつながります。私はちょうどこれにblog postを書きました。
この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
});
カーソルを認識するためのコントローラミックスイン家賃ルート：
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'、次のボタンテキストは '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>
フォームウィザードコンポーネントの内容を確認することができます（ルートに基づいて正しいステップにアクティブクラスを保持するFueluxウィザードのcssをラップするだけです）。ウィザードの本文は、各サブルートのテンプレートです。 next/prevボタンのテキストは、トランジションと同様にルートに応じて変わります（トランジションはウィザードの現在の状態に依存するため）。それは多かれ少なかれFSMです
あなたはすでにいくつかのアイデアを持っているようです。最初に実装しようとしないのはなぜですか？私はあなたの問題を解決する努力を示してくれたとき、人々はあなたを助ける可能性が高いと思う。 – DaMainBoss
http://stackoverflow.com/questions/14701856/ember-js-wizard-control <=これは助けになるかもしれません;）JSBinで何かを始めることができます。 – DaMainBoss
@DaMainBoss実際に私は数時間努力していて、まだこの瞬間も試しています。コントローラーから 'connectOutlet'で始まり、コントローラーには' connectOutlet'メソッドがなく、それをビューに移動してからルートで試してみたと言いました。ある時点ですべての意図が失われてしまったので、実際のコード例ではなくアーキテクチャーのガイドラインを求めています。なぜなら私は暗闇の中で刺すように感じているからです。また、既にそのリンクされた質問を見たが、それは私の質問に最初に似ているように関連していない。 –