meteor conditional html using helpers

Question

newbie question here... I'm trying to get a simple meteor app up but am having trouble getting one of my helper functions called (its seems to be getting ignored).

Basically I wast to use a slightly different html call depending on whether I'm using the first item in a collection or not.

I've added a sequence number to the collection (seq) that starts at 0, created a helper function on the template

Template.carousel.helpers({
  sponsors: function() {
    return sponsorDocs.find();
  },
  first_sponsor: function() {
    console.log(this);
    var value = (this.seq === 0);
    if(value) {
      console.log("Got first sponsor");
    }
    else {
      console.log("Not the first sponsor");
    }

    return value;
  }
});

and am trying to use it in the template as follows..

<template name="carousel">
<!-- Carousel
================================================== -->
<div id="tbCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    {{#each sponsors}}
      {{#if first_sponsor}}
        <li data-target="#tbCarousel" data-slide-to={{seq}} class= "active" ></li> 
      {{else}}
        <li data-target="#tbCarousel" data-slide-to={{seq}} ></li> 
      {{/if}}
    {{/each}}
  </ol>........

Now, the each is working fine, but the first_sponsor call never seems to happen (I never see the console log output anyway...

Any idea why? Is there a better way to do this anyway (does seem a bit clunky).

Ta

Peter.

Jim Mack Jim Mack · Accepted Answer · 2013-09-11T09:49:19

Put something visual for each li. Does 1, 2, or both appear?

Another way to do this is to just have the class name (active or blank) returned by the helper, class="{{sponsor_class}}" Added: We may learn that the false path is being taken, and then question why. A common reason is the JavaScript fails. Do you know about your web browsers console?

meteor conditional html using helpers

1 Answers