How do I handle states within a template?

blaze
1

(Using blaze.)

I want to walk my users through signing up and adding information to their profile. I want to display only one form field at a time, to make sure they understand the information that is being input.

I don’t really think each form field deserves a new template with helpers and events, but I also don’t want to clutter up my template with loads of nested {{#if}}s.

Is there a solid pattern for this sort of design?

1 Like
2

You don’t have to use nested {{#if}} just do something like {{#if isState state '1' }}. It is going to introduce some more code to the template, but imho a reasonable amount.

1 Like
3

Ah good idea. You’d store the actual state in a session var?

4

noooo don’t pollute session for something like that! Use the template to store the state, use session/localstorage if you want to keep the users state between closing/opening the page.

Template.yourTemplateName.onCreated(function(){
   this.state = new ReactiveVar(0);
})

You can then simply access is inside event callbacks from the template via

Template.yourTemplateName.events({
    'event .selector`: function(event, template){

          template.state.get() //Tadaaa there goes your state

          //or inside helpers
          Template.instance().state.get();

    }
})
1 Like
5

Thanks. Is this documented anywhere? Would make a very nice blogpost.

6

If i’m understand it correctly, you want a wizard with step by step walk through? if yes, here’s an exampe of a step wizard, if you’re using autoform, here’s one example package, forwarder:autoform-wizard, or you can browse here for other wizard options.

7

Check the Meteor guide.

8

@ajaxsoap Not quite. I was looking for a more generalized approach. I would like to have certain states to show certain parts of the template, but not necessarily in order. For example, a user will have to fill out their information when they sign up, but may also end up needing guidance if they accidentally set their username to “” or if other information (like a date) becomes invalid (the date was in the future, is now in the past).

@jamgold Thank you, I haven’t gotten around to reading the guide ‘cover to cover’ yet. I was hoping somebody might have an example app using this pattern.

9

You can also use handlebar helpers like so:

He uses a session variable but maybe you could do this with reactive dict-- I haven’t looked.