Ember路由:向导步骤的不同URL

Question

Usecase:包含多个步骤的向导。最初使用{{partial currentStepTemplate}}实现。

我想对它进行重构，使每个步骤都有一个单独的控制器。最初使用的是{{render currentStepTemplate controller=currentStepController}}，但与{{partial}}不同的是，render不绑定到currentStepTemplate和currentStepController属性，它将它们用作原始字符串。

我创建了一个路由/walkthrough/:step。

问题是没有特定的模型要加载到路由上，但是我需要知道使用只能在model钩子中访问的:step参数来呈现哪个模板。

仅仅将模型作为将step参数进一步传递给setupController和renderTemplate的一种方式看起来并不是一个好的模式，但我不确定我还能如何实现这一点。

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])
)

有什么提示/想法吗？谢谢!

Answer 1

然后，您的url将如下所示：

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

使用像这样的路由器

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