Hide elements with handlebars depending on user role

Question

I currently have two possible users in my project which are employers and candidates.

var User = new Schema({
    role:String
});

I have certain elements on my handlebars page which I would like to hide depending on the logged in user. These elements are simply font-awesome icons and buttons. Is there a way of doing this with a helper or something? Or maybe jQuery I'm not sure, I'm using Passport.js as my login system.

Answer 1

Guessing you render the page and inject the "user" variable, it's really easy to do.

You can use the if statement to render a block of code if the statement is true

I found this link that explains it really well.

---

First option

Here's a complete answer that should help you do what you want to do. (here is what it says :).

The easiest thing would be to add a custom if_eq helper:

Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if(a == b) // Or === depending on your needs
        return opts.fn(this);
    else
        return opts.inverse(this); }); and then adjust your template:

{{#if_eq this "some message"}}
    ... {{else}}
    ... {{/if_eq}} 

Demo: http://jsfiddle.net/ambiguous/d4adQ/

If your errors entries weren't simple strings then you could add "is this some message" flags to them and use a standard {{#if}} (note that adding a property directly to a string won't work that well):

for(var i = 0; i < errors.length; ++i) errors[i] = { msg: errors[i], is_status: errors[i] === 'some message' }; and:

{{#if is_status}}
    <li>Status</li> {{else}}
    <li>{{msg}}</li> {{/if}}

Demo: http://jsfiddle.net/ambiguous/9sFm7/

---

Second option

Using Elving's Swag Handlebars helpers library, you can use the helpers is and isnt. Click on the link for the documentation

Two examples

is

Conditionally render a block if the condition is true.

Parameters:

value [string|int] - the value to test against.

Usage:

number = 5

{{#is number 5}}
    Kiss my shiny metal ass!
{{else}}
    Never mind :(
{{/is}}

=> Kiss my shiny metal ass!

isnt

Conditionally render a block if the condition is false. Opposite of is.

Parameters:

value [string|int] - the value to test against.

Usage:

number = 5

{{#isnt number 5}}
    Kiss my shiny metal ass!
{{else}}
    Never mind :(
{{/isnt}}

=> Never mind :(

Answer 2

   {{#ifeq user.role 'admin'}} this will show only if user is admin {{/ifeq}}

One thing to keep in mind this will work only if the role is type string.