Add list-group-item class based on mongo result

help
1

I have a mongo collection that looks like :

{ type:"red", timestamp: new Date(), message:"something happened 3"})

I need these to pop up in a list. I got that part working. However, I want to set the class of list group item based on type. if type = red, then choose list-group-item-danger. If type = yellow, then choose list-group-item-warning. How do I get this done?

This is my list-group-item-template

<a href="#" class="list-group-item clearfix">
        <i class="fa fa-comment fa-fw"></i> {{ message }}
        <div class="pull-right text-muted small"><em>{{timestamp}}</em>
        </div>
    </a>
2

Do something like

<a href="#" class="{{listGroupClass}} clearfix">

and write a template helper for listGroupClass which returns 'list-group-item-danger', 'list-group-item-warning' or 'list-group-item' as appropriate.

3

Thanks @robfallows, would something like this not work out at all? because right now it’'s throwing me an error.

<a href="#" data-toggle="modal" data-target="#alertModal" class="list-group-item {{#if type == 'red'}} list-group-item-danger {{/if}} clearfix">
        <i class="fa fa-comment fa-fw"></i> {{ flashMessage }}
        <div class="pull-right text-muted small"><em>{{timestamp}}</em>
        </div>
    </a>
4

Correct - it won’t work.

5

Thanks @robfallows I got it to work.

Template.alert.helpers ({
    listGroupClass: function() {
        if (this.type == "red") {
            return "list-group-item list-group-item-danger";
        }else
        if (this.type == "warning") {
            return "list-group-item list-group-item-warning";
        }else
        if (this.type == "info") {
            return "list-group-item list-group-item-info";
        }
    }
1 Like