Nested If in Each Statement

Question

I have an application that allows users within a group to look at each member's message to the group and lists them out using {{#each comment}} in my view. I want to limit editing of any comment to only those comments associated with the logged in user using {{#if user.user_id}}.

I tried to nest an if statement within my each section, but it isn't hiding the edit link for those that don't match this case. Is this due to not having an else statement? Could it be that the nested if is from a different object?

Here is my view:

{{#each comment}}
    <div class="col-md-7 col-md-offset-5 comment-card">
        <div class="comment-card-header">
            <p class="card-date">{{this.commentDateSlug}}</p>
            <h3 class="card-title">{{this.title}}</h3>
        </div>
        <div class="comment-card-body">
            <p class="card-report-link">Report: <a href="{{this.commentLink}}" class="card-data-report-url">{{comment.reportLink}}</a></p>
        </div>

        {{#if user.user_id}}
        <p>This is the user: {{user.user_id}}</p>
        <div class="annotation-card-footer">
            <a href="/app/edit/{{this.commentId}}">Edit</a>
        </div>
        {{/if}}
    </div>
{{/each}}

Here is the route:

appRoutes.route('/') 

    .get(function(req, res){

        models.Comment.findAll({
            attributes: ['commentId', 'commentDate', 'dataDateStart', 'dataDateEnd', 'title', 'discovery', 'reportLink'],
            order: 'commentDate DESC',
            include: [{
                model: models.User,
                where: { organizationId: req.user.organizationId },
                attributes: ['organizationId', 'user_id']
            }]
        }).then(function(comment){
            res.render('pages/app/high-level-activity-feed.hbs',{
                comment: comment,
                user: req.user
            });
        })
    })

When you are inside of the `#each` block you are within the context scope of the current element being iterated over. To access `user` you need the proper path to go up a context `../user.user_id`. See http://handlebarsjs.com/#paths — 76484, Jun 11 '16 at 20:36
@76484 thanks for the comment, but after making your adjustment `{{#if ../user.user_id}}
This is the user:{{../user.user_id}}

Edit
{{/if}}` I am still left with the value being presented with the user_id for a not logged in user. — cphill, Jun 12 '16 at 19:56
I see. Does the comment object have a user_id property that can be compared to the current user's user_id? — 76484, Jun 12 '16 at 21:00
Yes, the comment object has a 'user_id' property that is linked to the current user's user_id — cphill, Jun 13 '16 at 00:47

score 1 · Accepted Answer · edited May 23 '17 at 10:33

It sounds like what you want to do in your template is to render the div.annotation-card-footer only for comments whose user_id is equal to the current user's user_id.

In pseudo-code, this would look something like the following:

if current_user.user_id equals comment.user_id:
    render div

Handlebars does not have support for comparison operators, so we will need to write our own block helper. There are existing resources about how to do this, see this link, but I will provide an example:

Handlebars.registerHelper('ifeq', function (value1, value2, options) {
    return ((value1 === value2) ? options.fn(this) : options.inverse(this));
});

Now that we have registered our helper, we can use it in our template:

{{#ifeq this.user_id ../user.user_id}}
    <p>This is the user: {{../user.user_id}}</p>
    <div class="annotation-card-footer">
        <a href="/app/edit/{{this.commentId}}">Edit</a>
    </div>
{{/ifeq}}

One advantage of using a block helper is that we can easily tack on an else branch:

{{#ifeq this.user_id ../user.user_id}}
    <p>This is the user: {{../user.user_id}}</p>
    <div class="annotation-card-footer">
        <a href="/app/edit/{{this.commentId}}">Edit</a>
    </div>
{{else}}
    {{! Non-current-user stuff goes here. }}
{{/ifeq}}

Nested If in Each Statement

1 Answers1