Meteor中多步注册流程的设计模式(Design pattern for a multiple step signup flow in Meteor)

我正在尝试构建一个3步注册流程，即分布在3个屏幕/模板上，但使用相同的路径。我正在使用Blaze和FlowRouter btw。

实现这一目标的简单模式是什么？

任何带领我走向正确方向的想法都值得赞赏，谢谢！

I'm trying to build a 3 step signup flow, i.e. spread out across 3 screens/templates, but using the same route. I'm using Blaze & FlowRouter btw.

What is a simple pattern to achieve this?

Any ideas to lead me in the right direction appreciated, thanks!

最满意答案

我已经使用动态模板和反应变量完成了这种模式。

一些示例代码可以帮助您入门

signup.html

<template name="signupContainer"> {{> Template.dynamic template=template}} </template> <template name="signupStepOne"> <h1>Step One</h1> <button id="next-step-btn">Next Step</button> </template> <template name="signupStepTwo"> <h1>Step Two</h1> </template>

signup.js

Template.signupContainer.onCreated(function () { var instance = this; instance.activeTemplate = new ReactiveVar('signupStepOne'); }); Template.signupContainer.events({ 'click #next-step-btn': function (event, instance) { instance.activeTemplate.set('signupStepTwo'); } }); Template.signupContainer.helpers({ template: function () { var instance = Template.instance(); return instance.activeTemplate.get(); } });

I've accomplished this pattern using dynamic templates and a reactive var.

Little example code to get you started

signup.html

<template name="signupContainer"> {{> Template.dynamic template=template}} </template> <template name="signupStepOne"> <h1>Step One</h1> <button id="next-step-btn">Next Step</button> </template> <template name="signupStepTwo"> <h1>Step Two</h1> </template>

signup.js

Template.signupContainer.onCreated(function () { var instance = this; instance.activeTemplate = new ReactiveVar('signupStepOne'); }); Template.signupContainer.events({ 'click #next-step-btn': function (event, instance) { instance.activeTemplate.set('signupStepTwo'); } }); Template.signupContainer.helpers({ template: function () { var instance = Template.instance(); return instance.activeTemplate.get(); } });

更多推荐