手风琴向导，带有多个步骤 [英] Accordion wizard with multiple steps in ember

问题描述

我正在使用ember构建一个向导手风琴。

I am using ember to built a "wizard accordion".

基本上我想要的是：

• 手风琴总是显示


• 手风琴包含所有步骤


• 每个步骤都有自己的模型（例如，从第一步中的国家选择，从第二步选择产品）


• >
  
• 应该可以跳回并在步骤之前逼迫
  
• 在所有选择之后，在最后一步后发送到服务器的中央模型


• 步数是动态，有时会跳过某些步骤

• an accordion which is always shown
• the accordion contains all the steps
• one step is active but it is also possibly to change the header of previous steps
• each step has its own model (e.g. Selecting from countries in first step, selecting from products in second)
• it should be possible to jump back and force between steps
• out of all the selections a central model is built which is sent to the server after the final step
• The number of steps is dynamic and sometimes certain steps are skipped

我想到的架构在应用程序模板中有3个出口：

The architecture i thought about is have 3 outlets in the application template:

• {{previousSteps}}


• {{outlet}}


• {{nextSteps}}

总是渲染3 t在每条路线上发现。每个步骤都将拥有自己的路由和控制器，并且每个步骤的创建操作将将共享模型保存到应用程序控制器并转换到下一步。

and always rendering 3 templates in each Route. Each step would have it's own route and controller and the create action of each step would save the shared model to application controller and transition to the next step.

但我猜这个解决方案是不是最好的。有人有更好的架构吗？
特别是如何构建路由，控制器和模板

But I guess this solution is by far not the best. Does somebody have a better architecture for this? Especially how to structure the routes, controller and templates

谢谢

更新：

我现在以下面的方式做。我感谢对我的解决方案的任何意见。

I am doing it the following way now. I appreciate any comments on my solution.

App.Router.map(function() {
   this.resource('steps', { path: '/' });
});

App.StepsRoute = Ember.Route.extend({
  model: function() {
    return [
      { controllerName: 'countries', templateName: 'countries', items:    this.store.find('country') },
      { controllerName:  'products', templateName: 'products', items: this.store.find('product') }
    ]
  }
});

App.StepsController = Ember.ArrayController.extend({
  currentStep: "countries",

  transitionToStep: function(step) {
    this.set('currentStep', step);
  },

  lookupItemController: function(modelObject) {
    return modelObject.controllerName;
  }
});

App.CountriesController = Ember.ObjectController.extend({
  needs: ['steps'],
  currentStep: Ember.computed.oneWay('controllers.steps.currentStep'),

  isExpanded: function() {
    return "countries" === this.get('currentStep');
  }.property('currentStep')
});

Steps.handlebars：

Steps.handlebars:

{{#each step in controller}}
  <div {{bind-attr class=":step controller.isExpanded:expanded"}}>
    {{view Ember.View templateName=step.templateName}}
  </div>
{{/each}}

我不得不使用ObjectController for Countries控制器，因为使用作为itemController的ArrayController没有工作

I had to use ObjectController for Countries controller since using an ArrayController as itemController did not work

推荐答案

根据您布局UI的方式，我想我会这样做在路由器中：

Based on the way you laid out the UI, I think I'd do something like this in the router:

App.Router.map(function() {
  this.resource('wizard', function() {
    this.route('step1');
    this.route('step2');
    this.route('step3');
  });
});

然后，有一个向导像这样：

{{#link-to 'wizard.step1'}}Step 1{{/link-to}}
<div {{bind-attr class='step1Expanded}}>{{outlet 'step1'}}</div>

{{#link-to 'wizard.step2'}}Step 2{{/link-to}}
<div {{bind-attr class='step2Expanded}}>{{outlet 'step2'}}</div>

{{#link-to 'wizard.step3'}}Step 3{{/link-to}}
<div {{bind-attr class='step3Expanded}}>{{outlet 'step3'}}</div>

然后，在每个步骤 ，您将需要重写renderTemplate，以便它在相应的插座中呈现，如下所示：

Then, inside each of the step routes, you would need to override renderTemplate so that it will render in the appropriate outlet, like this:

App.WizardStep1Route = Ember.Route.extend({
  renderTemplate: function() {
    this.render({outlet: 'step1'});
  }
});

最后，在 WizardController 内，需要添加计算属性来处理应用于类的 step1Expanded 逻辑，以便您可以知道在任何给定时间显示哪一个。

Finally, inside the WizardController, you would need to add computed properties to handle the step1Expanded logic being applied to the classes so you can know which one is displaying at any given time.

所有这一切将允许您每个步骤加载不同的模型，还将允许您处理路线内的模型验证逻辑。例如，如果在步骤1和步骤2完成之前无法进入步骤3，则可以添加逻辑来处理step1和step2路由。

All this will allow you to load different models per step and will also allow you to handle model validation logic inside your routes. For example, if you cannot proceed to step3 until step1 and step2 are completed, you can add logic to handle that inside the step1 and step2 routes.

这篇关于手风琴向导，带有多个步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！