手风琴向导在灰烬多个步骤 [英] Accordion wizard with multiple steps in ember

问题描述

我使用烬内置一个向导手风琴

基本上我想要的是：

• 这是始终显示手风琴


• 手风琴包含了所有的步骤


• 一步是活动的，但它也可能改变previous步骤头


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


• 应该可以跳回来和步骤之间的力量


• 出一个中心模型是建立在所有选择它的最后步骤后发送给服务器的


• 的步骤在数量是动态并有时某些步骤被跳过

• 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}}


• {{口}}


• {{nextSteps}}

和始终呈现在每个三号干线模板。每一步都将有自己的路线，控制器和每一步的创建行动将共享模式，应用控制器和过渡保存到下一个步骤。

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

感谢您

更新：

我现在做下面的方式。我AP preciate在我的解决方案有任何意见。

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为国家控制，因为使用的是ArrayController作为itemController没有工作

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

推荐答案

根据奠定了你的用户界面的方式，我想我会做这样的事情在路由器：

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.

这一切都将让您加载每步不同的车型，也将让你处理你的路由内部模型验证逻辑。例如，如果直到第一步和第二步完成后，你无法进行第三步，你可以添加逻辑来处理的第一步和第二步的路线内。

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屋！