我想将我的EmberJS应用程序的一条路线用作多步骤形式。这是我希望我的网址保持不变的唯一时间,因此location: 'none'
不是一个选项(据我所知)。我在其他路由上有控制器,它们与URL紧密集成在一起。
但是,在这个单一的,不变的URL我想完成以下任务:
.save()
- 提交时”。把手的工作方式真的让我在这上面循环。
我一直在倾注文档,但无法真正找到一个例子。我觉得这是一个我不知道还不知道的情况。所以如果有人能指出我正确的方向,希望这就是我所需要的。
答案 0 :(得分:26)
我开始使用MartinElvar的excellent answer,但由于我需要在向导的每个页面上验证表单,所以我在另一个地方结束了。通过使向导的每个页面成为自己的组件,您可以轻松地约束每个页面的验证。
从控制器上的步骤列表开始:
// app/controllers/wizard.js
export default Ember.Controller.extend({
steps: ['stepOne', 'stepTwo', 'stepThree'],
currentStep: undefined
});
然后确保无论何时输入控制器,都会将用户退回到第一步:
// app/routes/wizard.js
export default Ember.Route.extend({
setupController (controller, model) {
controller.set('currentStep', controller.get('steps').get('firstObject');
this._super(controller, model);
}
});
现在您可以返回控制器并添加一些更通用的下一个/后退/取消步骤:
// app/controller/wizard.js
export default Ember.Controller.extend({
steps: ['step-one', 'step-two', 'step-three'],
currentStep: undefined,
actions: {
next () {
let steps = this.get('steps'),
index = steps.indexOf(this.get('currentStep'));
this.set('currentStep', steps[index + 1]);
},
back () {
let steps = this.get('steps'),
index = steps.indexOf(this.get('currentStep'));
this.set('currentStep', steps.get(index - 1));
},
cancel () {
this.transitionToRoute('somewhere-else');
},
finish () {
this.transitionToRoute('wizard-finished');
}
}
});
现在为向导页面定义一个组件。这里的技巧是定义每个组件与控制器中列出的每个步骤相同的名称。 (这允许我们稍后使用组件助手。)这部分允许您在向导的每个页面上执行表单验证。例如,使用ember-cli-simple-validation:
// app/components/step-one.js
import {ValidationMixin, validate} from 'ember-cli-simple-validation/mixins/validate';
export default Ember.Component.extend(ValidationMixin, {
...
thingValidation: validate('model.thing'),
actions: {
next () {
this.set('submitted', true);
if (this.get('valid')) {
this.sendAction('next');
}
},
cancel () {
this.sendAction('cancel');
}
}
});
最后,路线的模板变得直截了当:
// app/templates/wizard.hbs
{{component currentStep model=model
next="next" back="back" cancel="cancel" finish="finish"}}
每个组件都获得对控制器模型的引用,并在步骤中添加所需的数据。这种方法对我来说非常灵活:它允许你在向导的每个阶段做任何必要的疯狂事情(例如与一块硬件交互并等待它响应)。
答案 1 :(得分:10)
您可以通过一些操作和一些定义表单状态的值来实现此目的。
您的控制器可能具有以下某些状态属性。
// Step one is default.
stepOne: true,
stepTwo: false,
stepThree: false,
您希望如何从一个步骤转换到另一个步骤,这是一个用例问题,但您将结束更改步骤属性,如此。
actions: {
toStepTwo: function() {
this.set('stepOne', false)
this.set('stepOne', true)
},
// But you could put this with some other functionality, say when the user answer a question.
answerQuestion: function() {
// Run some question code.
// Go to next step.
this.set('stepOne', false)
this.set('stepOne', true)
},
}
在模板中,您可以使用if帮助程序封装内容。
{{#if stepOne}}
Step one
{{/if}
{{#if stepTwo}}
This is step two
{{/if}}
所以在这里创建3步属性的原因,而不是
currentStep: 1,
是为了把手,目前你无法匹配当前的步骤。
{{#if currentStep == 1}}
除非你创建一个把手块助手。