Ember routes: different URLs for wizard steps

Question

Usecase: wizard with a number of steps. Initally implemented using {{partial currentStepTemplate}}.

I want to refactor this to have a separate controller for each step. Initially did a {{render currentStepTemplate controller=currentStepController}} but unlike {{partial}}, render is not bound to the currentStepTemplate and currentStepController properties and it uses them as raw strings.

I created a route /walkthrough/:step.

The problem is that there's no specific model to be loaded on the route, but I need to know which template to render using the :step parameter that's only accessible in the model hook.

It doesn't look like a good pattern to use the model just as a way of passing the step parameter further to setupController and renderTemplate, but not sure of how else I could achieve 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 only if exists
    if @container.lookup("controller:#{controllerName}")
      @set('stepController', controllerName)

    return @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!

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-21T16:32:33

I'm pretty sure you're trying to recreate how the router already works. I'd move each step to routes under a resource. Then your url would look like this:

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

with a 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 routes: different URLs for wizard steps

1 Answers