Bu eski bir iş parçacığı biliyorum ve muhtemelen OP'ye yardımcı olmayacaktır, ancak stackoverflow başka bir şeyden daha fazla yanıt alır. Bu konuda sadece blog post yazdım.
Yaptığım şeyi görmek için bu JSBin adresine bakın. Burada özetleyeceğim.şablonda adım başına
Rota:
Router.map(function() {
this.resource('wizard', function(){
this.route('index');
this.route('review');
this.route('complete');
});
});
Özel hesaplanmış mülk yolları değiştiğinde değerlerini değiştirir (bu durumda zaman sihirbaz değişikliklerin adımlar)
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];
}
}
});
}
A route-value nesne:
export default Ember.Object.extend({
route: null
//all other props can be added dynamically
});
Üründen haberdar olmak için bir denetleyici mikseri kira rota:
export default Ember.Mixin.create({
needs: ['application'],
currentPath: Ember.computed.alias("controllers.application.currentPath")
});
kaynak kontrolörü:
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'));
}
}
});
anlam olarak rota değeri nesnenin Think, "rota routeVal.route eşittir, aşağıdaki özellikler sahip olacak bu değerler" örneğin " şu anda aktif olan rota 'wizard.index' dir, bir sonraki geçiş 'wizard.review', bir sonraki düğme metni 'Review', önceki butonun gizlenmesi gerekir, vs "
Ve son olarak, kaynak şablonunuz:
Form-sihirbaz bileşeninin ne olduğu için jsbin'e bakabilirsiniz (yalnızca, etkin sınıfı etkin rotada tutarak, rotaya göre doğru adımı koruyan). Sihirbazın gövdesi, her bir alt adımın şablonudır. Bir sonraki/önceki düğmenin metni, geçişler gibi geçişe bağlı olarak değişir (geçiş, sihirbazın geçerli durumuna bağlıdır). Daha fazla veya daha az bir FSM
Zaten bazı fikirlerin var gibi görünüyor. Neden ilk önce onları uygulamaya çalışmıyorum? Sorununuzu çözmek için çaba gösterdiğinizde, insanların size yardımcı olma olasılıklarının daha yüksek olduğunu düşünüyorum. – DaMainBoss
http://stackoverflow.com/questions/14701856/ember-js-wizard-control <= Bu yardımcı olabilir;) JSBin'de bir şeyler başlatabilirsiniz. – DaMainBoss
@DaMainBoss aslında birkaç saat çalışıyorum ve hala bu anı deniyorum. Denetleyiciden 'connectOutlet' ile başladı ve denetleyicilerin' connectOutlet' yöntemine sahip olmadığını, ardından görüntüye taşıdığını ve daha sonra rotalarla denendiğini söyledi. Bütün niyetler bir noktada başarısız oldu, bu yüzden mimarlık yönergelerini soruyorum ve gerçek kod örneklerini değil, çünkü karanlıkta bıçakladığımı hissediyorum. Ayrıca, zaten bağlantılı bir soru olduğunu daha önce de görmüştüm ama ilk bakışta göründüğüm gibi bu soru ile ilgili değil. –