ember.js - Ember routes: different URLs for wizard steps -

ember.js - Ember routes: different URLs for wizard steps -

usecase: wizard number of steps. initally implemented using {{partial currentsteptemplate}}.

i want refactor have separate controller each step. did {{render currentsteptemplate controller=currentstepcontroller}} unlike {{partial}}, render not bound currentsteptemplate , currentstepcontroller properties , uses them raw strings.

i created route /walkthrough/:step.

the problem there's no specific model loaded on route, need know template render using :step parameter that's accessible in model hook.

it doesn't pattern utilize model way of passing step parameter farther setupcontroller , rendertemplate, not sure of how else accomplish this.

app.walkthroughroute = ember.route.extend( steps: ["", "intro", "name", "photo", "create_course"] model: (params) -> @set('stepname', params['step']) @set('steptemplate', "walkthrough/teacher/_step_#{stepname}") # optional controller: used if exists if @container.lookup("controller:#{controllername}") @set('stepcontroller', controllername) homecoming @steps.indexof(params['step']) rendertemplate: (controller, model) -> @render() @render @get('steptemplate'), controller: @get('stepcontroller') into: 'walkthrough' actions: nextstep: -> step = @modelfor('walkthrough') @transitionto('walkthrough.teacher', @steps[step + 1]) prevstep: -> step = @modelfor('walkthrough') @transitionto('walkthrough.teacher', @steps[step - 1]) )

any hints/ideas? thanks!

i'm pretty sure you're trying recreate how router works. i'd move each step routes under resource. url this:

#/walkthrough/step1 #/walkthrough/step2 #/walkthrough/step3 #/walkthrough/step4

with router like

app.router.map(function() { this.resource('walkthrough', function(){ this.route('step1'); this.route('step2'); this.route('step3'); this.route('step4'); }); });

http://emberjs.jsbin.com/musugiru/1/edit

ember.js