使用 Ember.js 在一个路径中的多步表单(或多个“页面") [英] Multi-step form (or multiple "pages") in one route using Ember.js

问题描述

我想将我的 EmberJS 应用程序的单一路线用于多步骤表单.这是唯一次我希望我的 URL 保持不变，所以 location: 'none' 不是一个选项(据我所知).我在其他路由上有控制器，它们应该与 URL 紧密集成.

I would like to devote a single route of my EmberJS app to being a multi-step form. This is the only time I want my URL to remain unchanged, so location: 'none' is not an option (as far as I can tell). I have controllers at other routes that are tightly integrated with the URL as they should be.

但是在这个单一的、不变的 URL 中，我想完成以下操作:

But at this single, unchanging URL I would like to accomplish the following:

1. 用户回答了一些问题.
2. 用户点击一个按钮，旧问题就会被新问题替换.
3. 冲洗并重复直到最后一个页面"，所有数据最终在提交时.save().

车把的工作方式真的让我陷入了困境.

The way handlebars works is really throwing me for a loop on this.

我一直在翻阅文档，但找不到真正的示例.我有一种感觉，这是一个我不知道我还不知道的情况.所以，如果有人能指出我正确的方向，希望这就是我所需要的.

I have been pouring over the documentation, but can't really find an example. I have a feeling that it is a case where I just don't know what I don't know yet. So if someone could point me in the right direction, hopefully that's all I'd need.

推荐答案

您可以通过一些操作和一些定义表单状态的值来实现这一点.

You could achieve this with some actions, and some values that defines the state of the form.

您的控制器可能有一些如下所示的状态属性.

Your controller could have some states properties like the following.

// Step one is default.
stepOne: true,
stepTwo: false,
stepThree: false,

您希望如何从一个步骤过渡到另一个步骤，这是一个用例问题，但是您将结束更改步骤属性，就像这样.

How you want to transition from step to step, is a matter of use case, but you would end of changing the step properties, like so.

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 助手来封装您的内容.

In your template you can just encapsulate your content using the if helper.

{{#if stepOne}}
  Step one
{{/if}
{{#if stepTwo}}
  This is step two
{{/if}}

所以这里创建 3 步属性的原因，而不是

So the reason for create 3 step properties here, instead of

currentStep: 1,

是为了车把，目前你不能像这样匹配当前的步骤.

Is for the sake of handlebars, currently you can't match a current step like so.

{{#if currentStep == 1}}

好吧，除非你创建一个把手块助手.

Well unless you create a handlebars block helper.

这篇关于使用 Ember.js 在一个路径中的多步表单(或多个“页面")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！