使用Ember.js的一个路由中的多步骤形式（或多个“页面”） [英] Multi-step form (or multiple "pages") in one route using Ember.js

问题描述

我想将我的EmberJS应用程序的单一路径用作一个多步骤的形式。这是仅时间，我希望我的网址保持不变，所以位置：'无'不是一个选项（据我所知）。我有其他路由的控制器与URL紧密集成，应该是。

但是，在这个单一的不变的URL中，我想完成以下内容： p>

1. 用户回答一些问题。


2. 用户点击一个按钮，旧问题将被新的问题所取代。


3. 冲洗并重复，直到最后一个页面
   

句柄的工作原理如下： .save（）真的扔我这个循环。

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

解决方案

你可以用一些操作和一些定义表单状态的值。

您的控制器可能具有以下一些状态属性。

  //第一步是默认值。 
 stepOne：true，
 stepTwo：false，
 stepThree：false，
  

如何从一步到一步转换是一个用例的问题，但是您将会改变步骤属性，像这样。

 $  actions：{
 toStepTwo：function（）{
 this.set（'stepOne'，false）
 this.set（'stepOne'，true）
}，
 //但是您可以用其他一些功能来表示，当用户回答问题时。 
 answerQuestion：function（）{
 //运行一些问题代码。 
 //转到下一步。 
 this.set（'stepOne'，false）
 this.set（'stepOne'，true）
}，
} 
  

在您的模板中，您可以使用if帮助程序封装您的内容。

  {{＃if stepOne}} 
第一步
 {{/ if} 
 {{#if stepTwo}} 
这是第二步
 {{/ if}} 
  

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

  currentStep：1，
  

为了手柄的目的，目前您无法匹配目前这样的步骤。

  {{ #if currentStep == 1}} 
  

除非你创建一个句柄块助手，否则

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.

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

1. User answers some questions.
2. User clicks a button and old questions are replaced with new questions.
3. Rinse and repeat until the last "page" where all the data is finally .save()-ed on submit.

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) 
  },
}

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

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