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>
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.
robfallows:
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.
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>
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