Design pattern for a multiple step signup flow in Meteor

Question

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!

Answer 1

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();
    }
});